/* ============================================================
   Nutriscopio — Design tokens
   Fresh, vivid palette — modern wellness (teal + coral + clean whites)
   ============================================================ */

:root {
  /* Light mode — crisp cool whites, saturated brand, true dark */
  --ink:          #0B0F14;     /* near-black, crisp (no warm bias) */
  --ink-soft:     #334155;     /* slate */
  --ink-muted:    #64748B;     /* slate-gray */
  --surface:      #FFFFFF;     /* pure white */
  --surface-alt:  #F6F7F9;     /* barely-there cool tint */
  --surface-inv:  #0F172A;     /* deep navy (was murky teal) */

  /* Brand — rich indigo (distinctive, premium editorial) */
  --brand:        #4F46E5;
  --brand-weak:   #E0E7FF;
  --brand-strong: #4338CA;

  /* Accent — soft violet (analogous with indigo, muted for subtle pop) */
  --accent:         #A78BFA;
  --accent-weak:    #EDE9FE;
  --accent-strong:  #7C3AED;

  --success: #10B981;
  --warn:    #F59E0B;
  --error:   #DC2626;

  --border:       #E2E8F0;
  --border-soft:  #F1F5F9;

  /* Typography */
  --font-sans:    'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display:   clamp(2.75rem, 6vw, 5rem);
  --fs-h1:        clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:        clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-h5:        1.125rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.875rem;
  --fs-caption:   0.8125rem;
  --fs-mono:      0.75rem;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px;
  --space-12: 96px; --space-16: 128px; --space-20: 160px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.18);

  --container: 1240px;
  --container-narrow: 880px;
  --container-mid: 1000px;
  --header-h: 72px;

  /* Header — light (white, feels modern/startup not institutional) */
  --header-bg:   #FFFFFF;
  --header-fg:   #0B0F14;
  --header-fg-muted: #64748B;
  --header-border: #E2E8F0;
  --header-hover: #F6F7F9;

  /* Footer — fully light (no dark sections anywhere) */
  --footer-bg:   #F6F7F9;
  --footer-fg:   #334155;
  --footer-fg-muted: #64748B;
  --footer-border: #E2E8F0;

  /* Reveal — soft tinted light bg with dark text */
  --reveal-bg:   #F0F1FF;     /* pale indigo tint — matches brand, airy */
  --reveal-fg:   #0B0F14;
  --reveal-accent: #4F46E5;
}

/* Dark mode (explicit only) — indigo brand + violet accent, dark chrome */
[data-theme="dark"] {
  --ink:         #F8FAFC;
  --ink-soft:    #CBD5E1;
  --ink-muted:   #94A3B8;
  --surface:     #0F172A;      /* page bg: deep slate navy */
  --surface-alt: #1E293B;      /* alt sections */
  --surface-inv: #FFFFFF;

  /* Brand indigo — lightened for dark bg legibility */
  --brand:        #818CF8;      /* indigo-400 */
  --brand-weak:   #312E81;      /* indigo-900 (card accent bg) */
  --brand-strong: #A5B4FC;      /* indigo-300 */

  /* Accent violet — lightened for dark bg */
  --accent:         #C4B5FD;    /* violet-300 */
  --accent-weak:    #4C1D95;    /* violet-900 */
  --accent-strong:  #DDD6FE;    /* violet-200 */

  --success: #34D399;
  --warn:    #FBBF24;
  --error:   #F87171;

  --border:       #334155;
  --border-soft:  #1E293B;

  /* Header — dark slate (inverts light-mode white header) */
  --header-bg:   #1E293B;
  --header-fg:   #F8FAFC;
  --header-fg-muted: #94A3B8;
  --header-border: #334155;
  --header-hover: #334155;

  /* Footer — darker than surface for depth */
  --footer-bg:   #0B1120;
  --footer-fg:   rgba(248, 250, 252, 0.82);
  --footer-fg-muted: rgba(248, 250, 252, 0.55);
  --footer-border: rgba(255, 255, 255, 0.08);

  /* Reveal — indigo-tinted dark (matches brand family) */
  --reveal-bg:   #1E1B4B;
  --reveal-fg:   #F8FAFC;
  --reveal-accent: #C4B5FD;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

/* Fallback font metric overrides */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}