@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }

  :root {
    --paper: oklch(0.975 0.008 85);
    --paper-2: oklch(0.955 0.010 85);
    --paper-3: oklch(0.93 0.012 85);
    --ink: oklch(0.18 0.01 60);
    --ink-2: oklch(0.38 0.01 60);
    --ink-3: oklch(0.58 0.008 60);
    --line: oklch(0.88 0.01 70);
    --accent: oklch(0.62 0.14 40);
    --accent-soft: oklch(0.93 0.05 40);
    --ok: oklch(0.62 0.12 155);
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--ink);
  }
}

@layer components {
  .placeholder-stripes {
    background-image: repeating-linear-gradient(
      45deg,
      oklch(0.90 0.01 70) 0 6px,
      oklch(0.94 0.01 70) 6px 12px
    );
  }

  .tile-dragging { opacity: 0.35; }
  .tile-over { outline: 2px dashed var(--accent); outline-offset: -2px; }

  .tile-wrap { position: relative; }
  .tile-note {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(4px);
    min-width: 160px;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms, transform 120ms;
    z-index: 3;
    box-shadow: 0 10px 30px -10px oklch(0.2 0.02 60 / 0.4);
  }
  .tile-note::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
  }
  .tile-wrap:hover .tile-note {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@layer utilities {
  .thin-scroll::-webkit-scrollbar { width: 8px; }
  .thin-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
  .thin-scroll::-webkit-scrollbar-track { background: transparent; }
}

@keyframes slide-up {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}