/* קלורי — design tokens (FROZEN, SPEC §12.1)
   Light values live on :root; dark values are applied twice: once for the OS
   preference (unless the app forces light) and once when the app forces dark
   (html[data-theme="dark"]). Everything else in the CSS reads these tokens. */

:root {
  color-scheme: light dark;

  /* surfaces & text */
  --c-bg: #F6F7F9;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF1F5;
  --c-surface-3: #E2E6EC;
  --c-text: #161A20;
  --c-text-2: #5A6472;
  --c-border: #D9DEE5;

  /* brand & semantic */
  --c-primary: #0E8F6E;
  --c-primary-contrast: #FFFFFF;
  --c-warning: #C2410C;
  --c-danger: #B91C1C;
  --c-success: #15803D;
  --c-info: #1D4ED8;
  --c-protein: #1D4ED8;
  --c-carbs: #B45309;
  --c-fat: #7E22CE;
  --c-water: #0369A1;

  /* derived tints (additive to the spec table; keep 4.5:1 text contrast) */
  --c-primary-strong: #0C7F62;   /* solid button background: 5:1 with white text */
  --c-primary-text: #0B6B52;     /* brand colour used as small text / links */
  --c-primary-soft: #DDF5EC;
  --c-warning-soft: #FFEDD5;
  --c-danger-soft: #FEE2E2;
  --c-success-soft: #DCFCE7;
  --c-info-soft: #DBEAFE;
  --c-water-soft: #E0F2FE;
  --c-meat: #991B1B;
  --c-meat-soft: #FEE2E2;
  --c-dairy: #1E40AF;
  --c-dairy-soft: #DBEAFE;
  --c-pareve: #166534;
  --c-pareve-soft: #DCFCE7;
  --c-input-bg: #FFFFFF;
  --c-input-border: #767F8C;    /* text-field boundary: ≥ 3:1 on card, page and input fill (WCAG 1.4.11) */
  --c-primary-hover: #0A7159;    /* solid button hover: darker than -strong so white text stays ≥ 4.5:1 */
  --c-toast-bg: #1F2937;
  --c-toast-text: #F9FAFB;
  --c-toast-action: #6EE7B7;
  --c-backdrop: rgba(10, 14, 20, 0.48);
  --c-focus: var(--c-primary);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* radii */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-full: 999px;

  /* type */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-hero: 32px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
  --lh: 1.5;

  /* shell */
  --nav-h: 64px;
  --nav-w: 200px;
  --header-h: 52px;
  --maxw: 1100px;
  --sheet-maxw: 520px;
  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-offset: calc(var(--nav-h) + var(--safe-bottom)); /* space reserved for the tab bar; 0 on desktop / full-screen pages */
  --hit: 44px;      /* minimum touch target */
  --hit-lg: 48px;   /* nav, checkboxes, cups, steppers */

  /* elevation & motion */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .12);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .22);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* layering */
  --z-header: 20;
  --z-nav: 30;
  --z-dialog: 50;
  --z-toast: 60;
  --z-skip: 100;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* dark values, shared by both activation paths */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #0F1216;
    --c-surface: #181C22;
    --c-surface-2: #222830;
    --c-surface-3: #2C333D;
    --c-text: #ECEFF3;
    --c-text-2: #A3ACB8;
    --c-border: #2F3640;
    --c-primary: #3CCB9B;
    --c-primary-contrast: #0B1A14;
    --c-warning: #FB923C;
    --c-danger: #F87171;
    --c-success: #4ADE80;
    --c-info: #60A5FA;
    --c-protein: #60A5FA;
    --c-carbs: #FBBF24;
    --c-fat: #C084FC;
    --c-water: #38BDF8;
    --c-primary-strong: #3CCB9B;
    --c-primary-text: #3CCB9B;
    --c-primary-soft: #16352C;
    --c-warning-soft: #3B2416;
    --c-danger-soft: #3F1D1D;
    --c-success-soft: #14321F;
    --c-info-soft: #1E2A44;
    --c-water-soft: #12303F;
    --c-meat: #FCA5A5;
    --c-meat-soft: #3F1D1D;
    --c-dairy: #93C5FD;
    --c-dairy-soft: #1E2A44;
    --c-pareve: #86EFAC;
    --c-pareve-soft: #14321F;
    --c-input-bg: #222830;
    --c-input-border: #6B7480;
    --c-primary-hover: #4FD6A8;
    --c-toast-bg: #2C333D;
    --c-toast-text: #ECEFF3;
    --c-toast-action: #3CCB9B;
    --c-backdrop: rgba(0, 0, 0, 0.62);
    --shadow-1: none;
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0F1216;
  --c-surface: #181C22;
  --c-surface-2: #222830;
  --c-surface-3: #2C333D;
  --c-text: #ECEFF3;
  --c-text-2: #A3ACB8;
  --c-border: #2F3640;
  --c-primary: #3CCB9B;
  --c-primary-contrast: #0B1A14;
  --c-warning: #FB923C;
  --c-danger: #F87171;
  --c-success: #4ADE80;
  --c-info: #60A5FA;
  --c-protein: #60A5FA;
  --c-carbs: #FBBF24;
  --c-fat: #C084FC;
  --c-water: #38BDF8;
  --c-primary-strong: #3CCB9B;
  --c-primary-text: #3CCB9B;
  --c-primary-soft: #16352C;
  --c-warning-soft: #3B2416;
  --c-danger-soft: #3F1D1D;
  --c-success-soft: #14321F;
  --c-info-soft: #1E2A44;
  --c-water-soft: #12303F;
  --c-meat: #FCA5A5;
  --c-meat-soft: #3F1D1D;
  --c-dairy: #93C5FD;
  --c-dairy-soft: #1E2A44;
  --c-pareve: #86EFAC;
  --c-pareve-soft: #14321F;
  --c-input-bg: #222830;
  --c-input-border: #6B7480;
  --c-primary-hover: #4FD6A8;
  --c-toast-bg: #2C333D;
  --c-toast-text: #ECEFF3;
  --c-toast-action: #3CCB9B;
  --c-backdrop: rgba(0, 0, 0, 0.62);
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);
}

/* motion off: OS preference or the in-app setting (app.js sets data-reduce-motion) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
  }
}
:root[data-reduce-motion="on"] {
  --dur-1: 0ms;
  --dur-2: 0ms;
}