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

/* Fonts are self-hosted through next/font. */

/* ─── Design Tokens ───────────────────────────────────────────────────── */
@layer base {
  :root {
    /* Warm neutral palette */
    --bg-base:       #f9f6f0;
    --bg-surface:    #f4f0e8;
    --bg-elevated:   #ffffff;
    --fg-primary:    #1e1810;
    --fg-secondary:  #5e4e3c;
    --fg-muted:      #9a8870;
    --fg-faint:      #b8a88a;
    --border-subtle: #e8e0d0;
    --border-strong: #d4c8b0;

    /* Single accent: editorial green */
    --accent:        oklch(52% 0.11 155);
    --accent-light:  oklch(72% 0.10 155);
    --accent-dark:   oklch(38% 0.10 155);
    --accent-muted:  oklch(92% 0.04 155);

    /* Nutri-Score grade colors */
    --score-a: #1a7a4a;
    --score-b: #5da832;
    --score-c: #e8c110;
    --score-d: #e07820;
    --score-e: #c0201a;

    /* Spacing primitives */
    --section-gap: 7rem;
    --container:   1120px;
    --radius:      0.375rem;

    /* shadcn/ui required tokens → warm neutral mapped */
    --background:           36 30% 96%;
    --foreground:           24 20% 10%;
    --card:                 36 30% 98%;
    --card-foreground:      24 20% 10%;
    --popover:              36 30% 98%;
    --popover-foreground:   24 20% 10%;
    --primary:              155 40% 32%;   /* accent green */
    --primary-foreground:   0 0% 100%;
    --secondary:            36 22% 90%;
    --secondary-foreground: 24 20% 20%;
    --muted:                36 20% 92%;
    --muted-foreground:     24 15% 46%;
    --destructive:          0 72% 44%;
    --destructive-foreground: 0 0% 100%;
    --border:               36 20% 86%;
    --input:                36 20% 86%;
    --ring:                 155 40% 32%;

    --chart-1: oklch(52% 0.11 155);
    --chart-2: oklch(62% 0.14 200);
    --chart-3: oklch(70% 0.16 60);
    --chart-4: oklch(56% 0.18 30);
    --chart-5: oklch(52% 0.15 340);
  }

  .dark {
    --bg-base:       #110e09;
    --bg-surface:    #1a1610;
    --bg-elevated:   #231e17;
    --fg-primary:    #f4f0e8;
    --fg-secondary:  #c8b898;
    --fg-muted:      #8a7860;
    --fg-faint:      #5e4e3c;
    --border-subtle: #2e2618;
    --border-strong: #3e3228;

    --accent:        oklch(62% 0.12 155);
    --accent-light:  oklch(75% 0.10 155);
    --accent-dark:   oklch(44% 0.10 155);
    --accent-muted:  oklch(20% 0.06 155);

    --background:           24 20% 8%;
    --foreground:           36 30% 94%;
    --card:                 24 20% 10%;
    --card-foreground:      36 30% 94%;
    --popover:              24 20% 10%;
    --popover-foreground:   36 30% 94%;
    --primary:              155 38% 48%;
    --primary-foreground:   0 0% 100%;
    --secondary:            24 18% 18%;
    --secondary-foreground: 36 28% 88%;
    --muted:                24 16% 16%;
    --muted-foreground:     36 20% 58%;
    --destructive:          0 62% 42%;
    --destructive-foreground: 0 0% 100%;
    --border:               24 18% 18%;
    --input:                24 18% 18%;
    --ring:                 155 38% 48%;
  }

  /* ── Base resets & typography ───────────────────────────────────────── */
  * {
    @apply border-border;
  }

  html {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    background-color: var(--bg-base);
    color: var(--fg-primary);
    font-family: var(--font-inter), system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.72;
    transition: background-color 0.4s ease, color 0.4s ease;
  }

  /* Headings use the active display font. */
  h1, h2, h3, h4 {
    font-family: var(--font-display), Georgia, serif;
    font-weight: 400;
    font-style: normal;
  }

  /* Hairline horizontal rule */
  hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
  }
}

/* ─── Utility layer ───────────────────────────────────────────────────── */
@layer utilities {

  /* Scrollbar */
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  .scrollbar-hide::-webkit-scrollbar { display: none; }

  /* Editorial typography helpers */
  .font-display   { font-family: var(--font-display), Georgia, serif; }
  .font-display-i { font-family: var(--font-display), Georgia, serif; font-style: italic; }

  /* Container max-width */
  .container-editorial {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
  }

  /* Hairline divider */
  .hairline {
    border: none;
    border-top: 1px solid var(--border-subtle);
  }
  .hairline-v {
    border: none;
    border-left: 1px solid var(--border-subtle);
  }

  /* Section vertical rhythm */
  .section-py    { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
  .section-pt    { padding-top: var(--section-gap); }
  .section-pb    { padding-bottom: var(--section-gap); }

  /* Warm surface tokens */
  .bg-base       { background-color: var(--bg-base); }
  .bg-surface    { background-color: var(--bg-surface); }
  .bg-elevated   { background-color: var(--bg-elevated); }

  .text-primary  { color: var(--fg-primary); }
  .text-secondary{ color: var(--fg-secondary); }
  .text-muted    { color: var(--fg-muted); }
  .text-faint    { color: var(--fg-faint); }

  /* Accent utilities */
  .text-accent   { color: var(--accent); }
  .bg-accent     { background-color: var(--accent); }
  .bg-accent-muted { background-color: var(--accent-muted); }
  .border-accent { border-color: var(--accent); }

  /* Label caps */
  .label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-inter), system-ui, sans-serif;
  }
  .label-lg {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-family: var(--font-inter), system-ui, sans-serif;
  }

  /* Product grid performance */
  .product-grid  { contain: layout style; }
  .product-card  { will-change: transform; backface-visibility: hidden; }

  /* Stagger animation helpers */
  .anim-delay-1 { animation-delay: 0.1s; }
  .anim-delay-2 { animation-delay: 0.2s; }
  .anim-delay-3 { animation-delay: 0.3s; }
  .anim-delay-4 { animation-delay: 0.4s; }
  .anim-delay-5 { animation-delay: 0.5s; }

  /* Nutri-Score grade pills */
  .grade-a { background: var(--score-a); color: #fff; }
  .grade-b { background: var(--score-b); color: #fff; }
  .grade-c { background: var(--score-c); color: #1e1810; }
  .grade-d { background: var(--score-d); color: #fff; }
  .grade-e { background: var(--score-e); color: #fff; }

  /* Thin top-border accent card */
  .card-accent-top {
    border-top: 2px solid var(--accent);
  }

  /* Hover lift */
  .hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px -8px rgba(30, 24, 16, 0.12);
  }

  /* Monochrome icon filter for editorial look */
  .icon-mono {
    filter: grayscale(1);
    opacity: 0.7;
  }
}

/* ─── Component layer ─────────────────────────────────────────────────── */
@layer components {

  /* ── Editorial Section Header ────────────────────────────────────────── */
  .section-header {
    @apply mb-16;
  }
  .section-header .eyebrow {
    @apply label text-accent mb-4 block;
  }
  .section-header h2 {
    @apply font-display text-display-lg text-[var(--fg-primary)] mb-5;
  }
  .section-header p {
    @apply text-[var(--fg-secondary)] text-lg leading-relaxed max-w-[65ch];
  }

  /* ── Warm Card ───────────────────────────────────────────────────────── */
  .card-warm {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .card-warm:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 32px -8px rgba(30, 24, 16, 0.10);
  }

  /* ── Accent Button ───────────────────────────────────────────────────── */
  .btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--accent);
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: var(--font-inter), sans-serif;
    transition: background-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    border: none;
  }
  .btn-accent:hover {
    background-color: var(--accent-dark);
    transform: translateY(-1px);
  }
  .btn-accent:active { transform: translateY(0); }

  .btn-accent:focus-visible,
  .btn-ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* ── Ghost Button ────────────────────────────────────────────────────── */
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.375rem;
    background: transparent;
    color: var(--fg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-inter), sans-serif;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
  }
  .btn-ghost:hover {
    background-color: var(--bg-surface);
    border-color: var(--fg-muted);
  }

  /* ── Stat Cell (Hero metrics) ────────────────────────────────────────── */
  .stat-cell {
    @apply flex flex-col items-center gap-1;
  }
  .stat-cell .stat-value {
    font-family: var(--font-display), Georgia, serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--fg-primary);
  }
  .stat-cell .stat-label {
    @apply label text-[var(--fg-muted)];
  }

  /* ── Step number (How It Works) ──────────────────────────────────────── */
  .step-number {
    font-family: var(--font-display), Georgia, serif;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--border-strong);
  }

  /* ── Nutri-Score Hero metric ─────────────────────────────────────────── */
  .nutriscore-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-family: var(--font-display), Georgia, serif;
    font-size: 2.25rem;
    animation: score-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* ── Search input editorial ──────────────────────────────────────────── */
  .search-editorial {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .search-editorial:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(52% 0.11 155 / 0.12);
  }
  .search-editorial input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 1.125rem 0;
    font-family: var(--font-inter), sans-serif;
    font-size: 1rem;
    color: var(--fg-primary);
  }
  .search-editorial input::placeholder {
    color: var(--fg-faint);
  }
}

/* ─── Keyframe animations ─────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes line-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes score-reveal {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Legacy animation class aliases (keep compatibility) ─────────────── */
.animate-in          { animation: fadeInUp 0.6s ease-out forwards; }
.fade-in-0           { opacity: 0; }
.slide-in-from-bottom-4 { transform: translateY(1rem); }
.animate-fade-up     { animation: fade-up   0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in     { animation: fade-in   0.5s ease forwards; }
.animate-stagger-in  { animation: stagger-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-pulse-slow  { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ─── Redesign: ink palette tokens (mirror the HTML spec) ────────────── */
:root {
  --ink-900: #141312;
  --ink-800: #26231f;
  --ink-700: #3d3934;
  --ink-600: #595149;
  --ink-500: #7a7269;
  --ink-400: #a39c93;
  --ink-300: #c9c3ba;
  --ink-200: #e4dfd7;
  --ink-150: #ece7de;
  --ink-100: #f3efe7;
  --ink-50:  #f9f6f0;
  --ink-0:   #fdfbf5;
  --nutri-a: #038141;
  --nutri-b: #85bb2f;
  --nutri-c: #fecb02;
  --nutri-d: #ee8100;
  --nutri-e: #e63e11;
  --accent-soft: oklch(94% 0.04 155);
  --accent-ink:  oklch(28% 0.06 155);
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --font-display: var(--font-instrument-serif);
  --font-serif: var(--font-display), 'Iowan Old Style', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
}

.landing-font {
  --font-display: var(--font-newsreader);
}

/* ─── Redesign: nutri-letter hero circle ─────────────────────────────── */
.nutri-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display), Georgia, serif;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 8px 24px -8px rgba(0,0,0,0.2);
}
.nutri-letter.grade-a, .nutri-letter.a { background: var(--nutri-a); }
.nutri-letter.grade-b, .nutri-letter.b { background: var(--nutri-b); }
.nutri-letter.grade-c, .nutri-letter.c { background: var(--nutri-c); color: #3a2a00; }
.nutri-letter.grade-d, .nutri-letter.d { background: var(--nutri-d); }
.nutri-letter.grade-e, .nutri-letter.e { background: var(--nutri-e); }

/* ─── Redesign: nutri-scale badge (full A–E row) ─────────────────────── */
.nutri-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-inter), sans-serif;
  font-weight: 800;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink-100);
  padding: 3px;
  gap: 2px;
}
.nutri-badge .seg {
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  letter-spacing: -0.02em;
  transition: transform 0.25s;
  opacity: 0.35;
  filter: saturate(0.3);
}
.nutri-badge .seg.active { opacity: 1; filter: none; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.nutri-badge .seg.a { background: var(--nutri-a); }
.nutri-badge .seg.b { background: var(--nutri-b); }
.nutri-badge .seg.c { background: var(--nutri-c); color: #3a2a00; }
.nutri-badge .seg.d { background: var(--nutri-d); }
.nutri-badge .seg.e { background: var(--nutri-e); }

/* ─── Redesign: eyebrow mono label ──────────────────────────────────── */
.eyebrow-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}

/* ─── Redesign: product card chip ─────────────────────────────────── */
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--ink-100, #f3efe7);
  color: var(--ink-700, #3d3934);
  border: 1px solid var(--ink-200, #e4dfd7);
}
.rd-chip.warn {
  background: var(--warn-soft, #fef3c7);
  color: var(--warn, #b45309);
  border-color: #fcd34d;
}