/* ═══════════════════════════════════════════════════════════════════════════
   IngredIQ — tokens.css
   Design system: "The Bio-Digital Synthesis" / "Clinical Greenhouse"
   See: Total redesign/DESIGN.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface tiers (tonal stacking) ── */
  --surface-lowest:           #0d0f0a;  /* the "void" — dominant background */
  --surface-low:              #1a1c17;
  --surface:                  #1e201b;
  --surface-high:             #292b25;
  --surface-highest:          #34352f;
  --surface-bright:           #383a34;
  --surface-dim:              #12140f;

  /* ── Primary: Bioluminescent Lime ── */
  --primary:                  #d4f687;
  --primary-container:        #b8d96e;
  --primary-fixed:            #cdef81;
  --primary-fixed-dim:        #b2d268;
  --on-primary:               #263500;
  --on-primary-container:     #465f00;

  /* ── Secondary: Enzymatic Amber ── */
  --secondary:                #f0c12c;
  --secondary-container:      #d2a501;
  --on-secondary:             #3d2e00;
  --on-secondary-container:   #503d00;

  /* ── Tertiary: Oxidized Clay ── */
  --tertiary:                 #ffe3dd;
  --tertiary-container:       #ffbeae;
  --tertiary-fixed-dim:       #ffb4a2;
  --on-tertiary-container:    #a02e10;

  /* ── Error ── */
  --error:                    #ffb4ab;
  --error-container:          #93000a;

  /* ── Foreground & outline ── */
  --on-surface:               #e3e3da;
  --on-surface-variant:       #c5c8b5;
  --outline:                  #8f9381;
  --outline-variant:          #444839;

  /* ── Grading System (A–D) — see DESIGN.md §5 ── */
  --grade-a:                  #d4f687;  /* Vibrant Growth */
  --grade-b:                  #b2d268;  /* Stable */
  --grade-c:                  #f0c12c;  /* Warning / Oxidation */
  --grade-d:                  #ffbeae;  /* Critical / Toxic */

  /* ── Glass & gradient overlays ── */
  --glass-bg:                 rgba(30, 32, 27, 0.70);
  --glass-bg-strong:          rgba(26, 28, 23, 0.85);
  --glass-blur:               blur(20px);
  --glass-stroke:             linear-gradient(135deg, rgba(212,246,135,0.15), rgba(212,246,135,0.00));

  /* ── Borders (Ghost Border — see DESIGN.md §4) ── */
  --ghost-border:             1px solid rgba(184, 217, 110, 0.15);
  --ghost-border-strong:      1px solid rgba(184, 217, 110, 0.30);
  --outline-border:           1px solid rgba(68, 72, 57, 0.20);

  /* ── Shadows (Ambient Bloom — replaces black drop shadows) ── */
  --bloom:                    0 24px 48px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(184, 217, 110, 0.08);
  --bloom-sm:                 0 4px 16px rgba(212, 246, 135, 0.20);
  --bloom-top:                0 -4px 12px rgba(184, 217, 110, 0.08);

  /* ── Typography ── */
  --font-headline:            'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:                'Manrope',       system-ui, -apple-system, sans-serif;
  --font-label:               'Space Grotesk', ui-monospace, 'SF Mono', monospace;

  /* Typographic scale */
  --display-lg:               3.5rem;     /* 56px — editorial moments */
  --display-md:               2.5rem;     /* 40px */
  --display-sm:               2rem;       /* 32px */
  --headline-lg:              1.75rem;    /* 28px */
  --headline-md:              1.5rem;     /* 24px */
  --body-md:                  0.9375rem;  /* 15px */
  --label-md:                 0.75rem;    /* 12px */
  --label-sm:                 0.6875rem;  /* 11px */

  /* Letter-spacing for clinical labels */
  --label-tracking:           0.05em;
  --label-tracking-wide:      0.10em;
  --label-tracking-widest:    0.20em;

  /* ── Radius ── */
  --radius-sm:                0.5rem;     /*  8px */
  --radius-md:                0.75rem;    /* 12px */
  --radius-lg:                1rem;       /* 16px */
  --radius-xl:                1.5rem;     /* 24px */
  --radius-2xl:               2rem;       /* 32px */

  /* ── Bottom nav reserve (used by .screen padding) ── */
  --bottom-nav-h:             88px;
  --topbar-h:                 64px;
}

/* ── Selection ── */
::selection {
  background: var(--primary);
  color: var(--on-primary);
}

/* ── Universal reset (kept minimal — Tailwind preflight handles most) ── */
* { box-sizing: border-box; }

/* ── Body baseline ── */
html, body {
  background-color: var(--surface-lowest);
  color: var(--on-surface);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Prevent iOS zoom on focused inputs */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}