/* Nutshell Health — tokens.css
 * The design system: colour, type, space, motion. Every other stylesheet
 * consumes these variables and defines no raw colours of its own.
 *
 * Theming: `:root` carries the light palette. Dark values are redefined under
 * both `prefers-color-scheme` (for the "system" setting) and an explicit
 * [data-theme="dark"] attribute (for the manual toggle), so both directions win
 * correctly regardless of the OS setting.
 */

:root {
  /* ---- brand + surfaces (light) ---- */
  --bg: #f4f6f8;
  --bg-soft: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-raised: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --text: #0f172a;
  --text-muted: #5a6779;
  --text-subtle: #8794a5;
  --text-inverse: #ffffff;

  --accent: #0f9d76;
  --accent-hover: #0c8765;
  --accent-soft: #e6f6f1;
  --accent-border: #a7ded0;
  --accent-text: #086b51;

  /* ---- status ---- */
  --good: #16a34a;
  --good-soft: #e8f7ee;
  --ok: #0284c7;
  --ok-soft: #e4f2fb;
  --warn: #d97706;
  --warn-soft: #fdf3e3;
  --alert: #dc2626;
  --alert-soft: #fdecec;
  --info: #4f46e5;
  --info-soft: #ecebfd;

  /* ---- nutrient identity colours (used by charts + bars) ---- */
  --n-kcal: #0f9d76;
  --n-protein: #4f46e5;
  --n-carb: #d97706;
  --n-fat: #db2777;
  --n-satfat: #dc2626;
  --n-fiber: #059669;
  --n-sodium: #7c3aed;
  --n-sugar: #e11d48;
  --n-water: #0284c7;
  --n-neutral: #94a3b8;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, .16), 0 4px 8px -4px rgba(15, 23, 42, .08);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, .24);

  /* ---- decorative ---- */
  --grad-accent: linear-gradient(135deg, var(--accent), #34d399);
  --grad-surface: linear-gradient(180deg, var(--surface), var(--surface-2));
  /* Hairline highlight along the top edge of raised cards. */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* ---- type ---- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-num: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;

  --fs-xs: .6875rem;   /* 11 */
  --fs-sm: .8125rem;   /* 13 */
  --fs-base: .9375rem; /* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---- space ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ---- radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 400ms;

  /* ---- layout ---- */
  --nav-w: 244px;
  --bottom-nav-h: 62px;
  --content-max: 1180px;
  --touch: 44px;
}

/* Dark palette — applied for the system default and for the explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f14;
    --bg-soft: #10161d;
    --surface: #151b23;
    --surface-2: #1b222c;
    --surface-raised: #1d2530;
    --border: #262f3b;
    --border-strong: #384354;

    --text: #e8eef5;
    --text-muted: #9aa8b8;
    --text-subtle: #6e7d8f;
    --text-inverse: #06121b;

    --accent: #2dd4a7;
    --accent-hover: #4fe0ba;
    --accent-soft: #10312a;
    --accent-border: #1d5a4b;
    --accent-text: #6ee7c4;

    --good: #34d399;
    --good-soft: #102b23;
    --ok: #38bdf8;
    --ok-soft: #0c2735;
    --warn: #fbbf24;
    --warn-soft: #2e2410;
    --alert: #f87171;
    --alert-soft: #331717;
    --info: #a5b4fc;
    --info-soft: #1e1f3d;

    --n-kcal: #2dd4a7;
    --n-protein: #818cf8;
    --n-carb: #fbbf24;
    --n-fat: #f472b6;
    --n-satfat: #f87171;
    --n-fiber: #34d399;
    --n-sodium: #a78bfa;
    --n-sugar: #fb7185;
    --n-water: #38bdf8;
    --n-neutral: #64748b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 32px -12px rgba(0, 0, 0, .6);
    --shadow-xl: 0 28px 56px -16px rgba(0, 0, 0, .7);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .05);
  --grad-surface: linear-gradient(180deg, var(--surface-2), var(--surface));
  }
}

:root[data-theme="dark"] {
  --bg: #0b0f14;
  --bg-soft: #10161d;
  --surface: #151b23;
  --surface-2: #1b222c;
  --surface-raised: #1d2530;
  --border: #262f3b;
  --border-strong: #384354;

  --text: #e8eef5;
  --text-muted: #9aa8b8;
  --text-subtle: #6e7d8f;
  --text-inverse: #06121b;

  --accent: #2dd4a7;
  --accent-hover: #4fe0ba;
  --accent-soft: #10312a;
  --accent-border: #1d5a4b;
  --accent-text: #6ee7c4;

  --good: #34d399;
  --good-soft: #102b23;
  --ok: #38bdf8;
  --ok-soft: #0c2735;
  --warn: #fbbf24;
  --warn-soft: #2e2410;
  --alert: #f87171;
  --alert-soft: #331717;
  --info: #a5b4fc;
  --info-soft: #1e1f3d;

  --n-kcal: #2dd4a7;
  --n-protein: #818cf8;
  --n-carb: #fbbf24;
  --n-fat: #f472b6;
  --n-satfat: #f87171;
  --n-fiber: #34d399;
  --n-sodium: #a78bfa;
  --n-sugar: #fb7185;
  --n-water: #38bdf8;
  --n-neutral: #64748b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 32px -12px rgba(0, 0, 0, .6);
  --shadow-xl: 0 28px 56px -16px rgba(0, 0, 0, .7);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .05);
  --grad-surface: linear-gradient(180deg, var(--surface-2), var(--surface));
}

/* Accessibility preferences, set from Settings. */
:root[data-text="large"] {
  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-base: 1.05rem;
  --fs-md: 1.12rem;
  --fs-lg: 1.28rem;
  --fs-xl: 1.55rem;
  --fs-2xl: 1.95rem;
  --fs-3xl: 2.5rem;
}

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}