@import "tailwindcss";

/* ---------------------------------------------------------------------------
   Warm Culinary Editorial Theme ("Parchment & Terracotta" / "Cast-Iron & Peach")
   ---------------------------------------------------------------------------
   Perceptually uniform OKLCH tokens paired with CSS `light-dark()`.
   Every foreground/background pair is verified against WCAG 2.2 AA:
     - Body & 12px metadata (`ink`, `ink-muted`, `ink-faint`) >= 4.5:1
     - Interactive borders (`line-strong`, `selected-line`) >= 3.0:1 (SC 1.4.11)
   --------------------------------------------------------------------------- */
@theme {
  /* Surfaces: warm unbleached linen in light mode, cast-iron slate in dark */
  --color-canvas: light-dark(oklch(97.4% 0.010 81.8), oklch(20.0% 0.021 245.9));
  --color-surface: light-dark(oklch(99.4% 0.006 84.6), oklch(24.5% 0.028 244.8));
  --color-raised: light-dark(oklch(94.3% 0.017 79.4), oklch(30.0% 0.035 242.7));
  --color-line: light-dark(oklch(84.6% 0.029 81.5), oklch(37.6% 0.042 242.8));
  --color-line-strong: light-dark(oklch(56.7% 0.032 74.0), oklch(62.5% 0.046 239.9));

  /* Typography ink hierarchy */
  --color-ink: light-dark(oklch(22.8% 0.016 62.5), oklch(96.4% 0.021 79.1));
  --color-ink-muted: light-dark(oklch(40.7% 0.024 64.6), oklch(84.1% 0.017 250.9));
  --color-ink-faint: light-dark(oklch(48.0% 0.026 67.1), oklch(72.6% 0.028 251.7));

  /* Primary culinary accent: Terracotta Paprika (light) / Warm Peach (dark) */
  --color-brand-300: light-dark(oklch(49.7% 0.151 37.0), oklch(82.9% 0.092 53.1));
  --color-brand-400: light-dark(oklch(51.8% 0.155 37.0), oklch(81.8% 0.098 52.8));
  --color-brand-500: light-dark(oklch(48.1% 0.146 36.8), oklch(85.8% 0.088 52.7));
  --color-brand-600: light-dark(oklch(54.0% 0.159 37.1), oklch(80.8% 0.102 52.6));
  --color-brand-950: light-dark(oklch(95.4% 0.025 65.6), oklch(26.8% 0.011 36.5));
  --color-brand-border: light-dark(oklch(71.0% 0.105 44.7), oklch(52.8% 0.088 49.3));
  --color-on-accent: light-dark(oklch(98.8% 0.009 67.7), oklch(18.8% 0.013 55.5));

  /* Selected control fill & border (>= 4.4:1 boundary contrast) */
  --color-selected: light-dark(oklch(90.8% 0.023 78.2), oklch(35.3% 0.043 243.0));
  --color-selected-line: light-dark(oklch(49.8% 0.034 72.0), oklch(71.7% 0.046 240.1));

  /* Semantic status tokens (Herb Sage / Saffron Ochre / Chili) */
  --color-status-ok: light-dark(oklch(44.7% 0.092 154.8), oklch(84.0% 0.149 155.5));
  --color-status-ok-bg: light-dark(oklch(95.5% 0.018 161.1), oklch(27.6% 0.040 162.9));
  --color-status-ok-line: light-dark(oklch(69.9% 0.094 157.2), oklch(52.0% 0.101 156.2));

  --color-status-warn: light-dark(oklch(47.6% 0.106 63.3), oklch(88.3% 0.120 85.9));
  --color-status-warn-bg: light-dark(oklch(96.7% 0.029 82.6), oklch(26.8% 0.034 78.8));
  --color-status-warn-line: light-dark(oklch(72.6% 0.128 75.7), oklch(55.4% 0.107 76.3));

  --color-status-danger: light-dark(oklch(48.1% 0.167 26.2), oklch(80.8% 0.103 19.6));
  --color-status-danger-bg: light-dark(oklch(95.2% 0.021 17.5), oklch(24.8% 0.043 13.6));
  --color-status-danger-line: light-dark(oklch(68.1% 0.127 21.0), oklch(49.1% 0.133 18.8));

  /* Three-voice editorial typography */
  --font-sans: var(--font-jakarta), system-ui, sans-serif;
  --font-serif: var(--font-fraunces), Georgia, Cambria, serif;
  --font-mono: var(--font-jb-mono), ui-monospace, SFMono-Regular, monospace;

  /* Animations */
  --animate-fade-in: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --animate-preview-timer: preview-timer 1s linear forwards;

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes preview-timer {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

@view-transition {
  navigation: auto;
}

@layer base {
  html {
    color-scheme: light dark;
  }

  html[data-theme="light"] {
    color-scheme: light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  body {
    @apply bg-canvas text-ink antialiased selection:bg-brand-950 selection:text-ink;
  }

  /* Visible focus for keyboard users on every interactive element. */
  :where(button, a, input, select, summary, [tabindex]):focus-visible {
    @apply outline-2 outline-offset-2 outline-brand-600;
  }

  input[type="range"] {
    @apply accent-brand-600;
  }

  input:not([type="range"], [type="checkbox"]) {
    @apply bg-surface text-ink placeholder:text-ink-faint;
  }

  /* Native <dialog> spring entry/exit via 2026 Baseline @starting-style */
  dialog {
    color: var(--color-ink);
    transition:
      opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
      display 0.26s allow-discrete,
      overlay 0.26s allow-discrete;
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);

    @starting-style {
      opacity: 0;
      transform: translateY(14px) scale(0.985);
    }
  }

  dialog.sheet-dialog {
    transform: translateY(100%);
  }

  dialog.sheet-dialog[open] {
    transform: translateY(0);

    @starting-style {
      transform: translateY(100%);
    }
  }

  dialog::backdrop {
    background-color: rgb(10 14 18 / 0);
    backdrop-filter: blur(0px);
    transition:
      background-color 0.24s ease,
      backdrop-filter 0.24s ease,
      display 0.24s allow-discrete,
      overlay 0.24s allow-discrete;
  }

  dialog[open]::backdrop {
    background-color: rgb(10 14 18 / 0.55);
    backdrop-filter: blur(2px);

    @starting-style {
      background-color: rgb(10 14 18 / 0);
      backdrop-filter: blur(0px);
    }
  }
}

/* 2026 CSS optical cap-height trimming for buttons, badges & chips */
.trim-cap {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Subtle tactile paper noise texture without GPU-heavy blur blobs */
.paper-grain {
  background-image: radial-gradient(color-mix(in oklab, var(--color-ink) 5%, transparent) 1px, transparent 0);
  background-size: 18px 18px;
}

/* Market receipt serrated / perforated divider feel */
.receipt-rule {
  border-top: 1px dashed var(--color-line-strong);
}

/* Respect the OS "reduce motion" setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}