/* =========================================================
   NutriAI — Colors & Type Foundations
   Premium AI health-tech. Dark graphite base, warm mint/lime
   accents, soft cyan data glow, warm whites.
   ========================================================= */

/* ---------- Fonts ----------
   Display / UI: Geist (Vercel) — modern, humanist, a bit warmer
   than Inter. Crisp on dark backgrounds.
   Numerics / Data: Geist Mono — tabular figures for calories,
   macros, weight.
   Editorial accents: Instrument Serif — a thin, optical serif
   used sparingly for emotional/display moments ("your body",
   "your day").
   These are loaded via @import from Google Fonts; local fallbacks
   kept so the system works offline.
----------------------------------------------------------- */

:root {
  /* ============ COLOR — RAW PALETTE ============ */

  /* Graphite / dark navy backgrounds. Slightly blue-shifted
     black, never pure #000. Layered in 5 steps. */
  --ink-0:   #07090B;   /* page void, below everything */
  --ink-1:   #0B0F13;   /* app background */
  --ink-2:   #11161C;   /* surface / cards */
  --ink-3:   #171D25;   /* raised surface */
  --ink-4:   #1F2731;   /* hover surface */
  --ink-5:   #2A333F;   /* border, divider */

  /* Warm white / text */
  --bone-0:  #FAFAF7;   /* primary text (warm white) */
  --bone-1:  #E8E7E1;   /* high-emphasis secondary */
  --bone-2:  #B8B7AF;   /* body secondary */
  --bone-3:  #7C7C74;   /* muted */
  --bone-4:  #4A4B47;   /* disabled / lowest */

  /* Mint — primary brand accent. Fresh, healthy, not neon. */
  --mint-50:  #E8FBF0;
  --mint-100: #CDF6DF;
  --mint-200: #A5EEC6;
  --mint-300: #6FE0A5;
  --mint-400: #3FCE85;  /* primary mint */
  --mint-500: #21B46D;
  --mint-600: #148E55;
  --mint-700: #0E6B40;

  /* Lime — secondary accent, for highlights & progress peaks. */
  --lime-300: #D4F76A;
  --lime-400: #C2EE47;  /* primary lime */
  --lime-500: #A8D628;

  /* Soft cyan — data/AI glow, info highlights. */
  --cyan-300: #9BE9F5;
  --cyan-400: #6DD8E8;  /* primary cyan */
  --cyan-500: #3FB8CC;

  /* Warm amber — calories/energy, small accents. Used sparingly. */
  --amber-300: #FFD9A0;
  --amber-400: #FFBD6B;
  --amber-500: #F09A3B;

  /* Coral — deficit/warning, motivational notes. Used sparingly. */
  --coral-300: #FFB7A8;
  --coral-400: #FF8C7A;
  --coral-500: #E86A56;

  /* ============ COLOR — SEMANTIC ============ */

  /* Backgrounds */
  --bg-app:      var(--ink-1);
  --bg-surface:  var(--ink-2);
  --bg-raised:   var(--ink-3);
  --bg-hover:    var(--ink-4);
  --bg-inverse:  var(--bone-0);

  /* Foreground */
  --fg-1:        var(--bone-0);
  --fg-2:        var(--bone-1);
  --fg-3:        var(--bone-2);
  --fg-muted:    var(--bone-3);
  --fg-disabled: var(--bone-4);
  --fg-inverse:  var(--ink-1);

  /* Accents (semantic) */
  --accent:           var(--mint-400);
  --accent-strong:    var(--mint-500);
  --accent-soft:      color-mix(in oklab, var(--mint-400) 18%, transparent);
  --accent-glow:      color-mix(in oklab, var(--mint-400) 35%, transparent);

  --highlight:        var(--lime-400);
  --data:             var(--cyan-400);
  --energy:           var(--amber-400);
  --deficit:          var(--coral-400);

  /* Lines */
  --border-subtle:  color-mix(in oklab, var(--bone-0) 6%, transparent);
  --border-line:    color-mix(in oklab, var(--bone-0) 10%, transparent);
  --border-strong:  color-mix(in oklab, var(--bone-0) 18%, transparent);
  --border-accent:  color-mix(in oklab, var(--mint-400) 40%, transparent);

  /* Glass */
  --glass-bg:      color-mix(in oklab, var(--ink-2) 60%, transparent);
  --glass-border:  color-mix(in oklab, var(--bone-0) 10%, transparent);
  --glass-blur:    blur(24px) saturate(140%);

  /* Shadows — always cool-dark, never warm */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg:     0 24px 60px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-glow:   0 0 0 1px color-mix(in oklab, var(--mint-400) 30%, transparent),
                   0 12px 40px -8px color-mix(in oklab, var(--mint-400) 40%, transparent);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ============ SPACING ============ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ============ TYPE — FAMILIES ============ */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;

  /* ============ TYPE — SCALE ============ */
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-24: 24px;
  --fz-28: 28px;
  --fz-32: 32px;
  --fz-40: 40px;
  --fz-48: 48px;
  --fz-56: 56px;
  --fz-72: 72px;
  --fz-96: 96px;

  /* Line heights */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-tightest: -0.04em;
  --ls-tight:    -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.02em;
  --ls-widest:   0.14em;  /* for eyebrow labels */

  /* ============ MOTION ============ */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:   160ms;
  --d-base:   240ms;
  --d-slow:   420ms;
  --d-slower: 720ms;
}

/* =========================================================
   SEMANTIC TYPE TOKENS
   Use these class-like vars as shorthand in components.
   Mapping: display = hero moments; h1/h2/h3 = section hierarchy;
   body = reading; label/eyebrow = UI meta; mono = data.
   ========================================================= */

.t-display-xl,
.t-display,
.t-h1, .t-h2, .t-h3, .t-h4,
.t-body-lg, .t-body, .t-body-sm,
.t-label, .t-eyebrow,
.t-mono, .t-mono-lg,
.t-serif, .t-serif-lg {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}

.t-display-xl {
  font-family: var(--font-sans);
  font-size: clamp(56px, 8vw, var(--fz-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  font-weight: 500;
}

.t-display {
  font-size: clamp(40px, 5.5vw, var(--fz-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  font-weight: 500;
}

.t-h1 {
  font-size: var(--fz-56);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}
.t-h2 {
  font-size: var(--fz-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}
.t-h3 {
  font-size: var(--fz-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}
.t-h4 {
  font-size: var(--fz-20);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}

.t-body-lg {
  font-size: var(--fz-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}
.t-body {
  font-size: var(--fz-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 400;
}
.t-body-sm {
  font-size: var(--fz-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  font-weight: 400;
}

.t-label {
  font-size: var(--fz-13);
  line-height: 1.3;
  color: var(--fg-3);
  font-weight: 500;
}

.t-eyebrow {
  font-size: var(--fz-12);
  line-height: 1.2;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fz-13);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--fg-2);
}
.t-mono-lg {
  font-family: var(--font-mono);
  font-size: var(--fz-20);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  font-weight: 500;
}

.t-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--fg-1);
}
.t-serif-lg {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

/* =========================================================
   UTILITY CLASSES (shared across previews & UI kits)
   ========================================================= */

.u-bg-app     { background: var(--bg-app); }
.u-bg-surface { background: var(--bg-surface); }
.u-bg-raised  { background: var(--bg-raised); }
.u-fg-1 { color: var(--fg-1); }
.u-fg-2 { color: var(--fg-2); }
.u-fg-3 { color: var(--fg-3); }
.u-fg-muted   { color: var(--fg-muted); }
.u-accent     { color: var(--accent); }
.u-highlight  { color: var(--highlight); }
.u-data       { color: var(--data); }

.u-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.u-aura {
  position: relative;
  isolation: isolate;
}
.u-aura::before {
  content: "";
  position: absolute; inset: -30% -20%;
  background: radial-gradient(50% 50% at 50% 50%,
    var(--accent-glow) 0%,
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* =============================================================================
   SHARED LANGUAGE SWITCHER
   ============================================================================= */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lang-switcher-buttons {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: 999px;
  isolation: isolate;
  background: rgba(7, 13, 18, 0.84);
  border: 1px solid rgba(110, 255, 190, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(63, 206, 133, 0.1),
    0 0 18px rgba(63, 206, 133, 0.22);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.lang-switcher-buttons::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: transparent;
  box-shadow:
    0 0 16px rgba(63, 206, 133, 0.42),
    0 0 32px rgba(63, 206, 133, 0.24);
  opacity: 0.5;
  animation: langAuraGlow 4.2s ease-in-out infinite;
}

.lang-switcher-btn {
  min-width: 31px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 180ms, background 180ms, box-shadow 180ms;
}

.lang-switcher-btn:hover,
.lang-switcher-btn:focus-visible {
  color: rgba(255, 255, 255, 0.96);
  outline: none;
}

.lang-switcher-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.lang-switcher-btn.is-active {
  color: #0B0F13;
  background: linear-gradient(180deg, var(--mint-400), var(--mint-500));
  box-shadow: 0 0 18px rgba(63, 206, 133, 0.38);
}

.mobile-menu-lang-row {
  overflow: visible;
  padding: 10px 0 14px 14px;
}

.mobile-menu-lang-switcher,
.legal-menu-lang-switcher {
  padding: 6px 10px;
  margin-left: 0;
  overflow: visible;
}

.mobile-menu-lang-switcher .lang-switcher-buttons,
.legal-menu-lang-switcher .lang-switcher-buttons {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(63, 206, 133, 0.16),
    0 0 14px rgba(63, 206, 133, 0.26);
}

.mobile-menu-lang-switcher .lang-switcher-buttons::before,
.legal-menu-lang-switcher .lang-switcher-buttons::before {
  display: none;
}

.mobile-menu-lang-switcher .lang-switcher-btn.is-active,
.legal-menu-lang-switcher .lang-switcher-btn.is-active {
  box-shadow:
    0 0 10px rgba(63, 206, 133, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@keyframes langAuraGlow {
  0%, 100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switcher-buttons,
  .lang-switcher-buttons::before {
    animation: none;
  }
}

@media (max-width: 600px) {
  .lang-switcher-buttons {
    gap: 0;
    padding: 3px;
  }

  .lang-switcher-btn {
    min-width: 30px;
    height: 30px;
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .lang-switcher-btn {
    min-width: 28px;
    height: 28px;
    font-size: 9.5px;
  }
}

/* Base reset for design-system previews */
html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0; padding: 0;
}