/* LifeOS — Cobot reference refinement, 2026-10-09.
   System typography, midnight-blue dark canvas, warm stone light canvas, translucent panels.
   Dark is the base; explicit light and system light share identical values.
   Informative text meets 4.5:1 on surfaces, hover and selection.
   test/contrast.test.mjs and test/tokens.test.mjs enforce these contracts. */

/* ── Theme-independent tokens ───────────────────────────────────────────── */
:root {
  /* Type. The system stack: SF Pro on iPhone and Mac (decision D2). */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-han: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-micro: 11px;    --lh-micro: 14px;    /* counts in nav, kbd */
  --fs-mini: 12px;     --lh-mini: 16px;     /* meta, chips, section labels (sentence case) */
  --fs-small: 13px;    --lh-small: 18px;    /* desktop UI base: rows, nav, buttons */
  --fs-regular: 15px;  --lh-regular: 22px;  /* phone UI base, chat, sheet body */
  --fs-large: 17px;    --lh-large: 24px;    /* phone header title, sheet title */
  --fs-title: 20px;    --lh-title: 26px;    /* desktop sheet title, HSK hanzi rows */
  --fs-metric: 30px;   --lh-metric: 36px;   /* the one number in S widgets */
  --fs-glyph: 40px;
  --fs-glyph-lg: 56px;
  --tr-title: -0.012em;
  --tr-metric: -0.022em;

  /* Shape. A pill (--r-full) only for chips, badges, avatars, the tab bar. */
  --r-xs: 4px;      /* kbd */
  --r-sm: 6px;      /* buttons, inputs, rows, icon buttons */
  --r-md: 8px;      /* nav items, menus, segmented, toast */
  --r-lg: 20px;     /* widgets, inset panel, sheet */
  --r-xl: 28px;     /* bottom-sheet top corners */
  --r-full: 9999px; /* chips, badges, avatar, tab bar */

  /* Space: 4 px grid. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Frame. */
  --sidebar-w: 220px;
  --header-h: 84px;
  --content-max: 1240px;
  --overview-max: 2292px;
  --panel-inset: 8px;
  --content-pad: 24px;
  --tabbar-h: 60px;
  --tabbar-bottom: max(8px, calc(env(safe-area-inset-bottom) - 4px));

  /* Rows and controls. */
  --row-h: 36px;     /* one line */
  --row-h-2: 52px;   /* with a why line */
  --control-h: 28px; /* buttons; 40px on coarse pointers */
  --input-h: 32px;   /* inputs; 40px on coarse pointers */
  --hit-min: 44px;   /* every touch target, via padding or ::before */

  /* Widgets. */
  --widget-pad: 14px;
  --widget-gap: 12px;
  --icon: 16px;
  --icon-sm: 14px;

  /* Motion: never longer than 200 ms; prefers-reduced-motion turns it off. */
  --dur-quick: 100ms;
  --dur-fade: 150ms;
  --dur-regular: 200ms;
  --ease-out: cubic-bezier(.215, .61, .355, 1);

  /* Layers. */
  --z-header: 100;
  --z-tabbar: 150;
  --z-sheet: 700;
  --z-toast: 800;
  --z-menu: 900;

  /* Navigation blur; content panels use translucent paint without extra blur layers. */
  --bar-blur: blur(20px);

  /* Shared card shape. */
  --r-glass: 24px;       /* widgets, sidebar, sheets — iOS widget corner */
  --r-glass-sm: 12px;    /* rows and controls inside glass */

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

/* ── Dark (base) ────────────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --nutrition-kcal: #9dc9b7;
  --nutrition-protein: #a4bbdf;
  --nutrition-fat: #dcb67e;
  --nutrition-carbs: #c9abd0;
  --canvas-top: #0b1528;
  --canvas-bottom: #060c18;
  --panel-glass: rgba(255, 255, 255, .06);
  --glass-edge: rgba(255, 255, 255, .06);
  --ink: #e1ebfa;
  --on-ink: #0b1528;
  --ink-muted: #40516c;

  --bg-sidebar: #080f1e;
  --bg-app: #080f1e;
  --bg-card: #101d32;
  --bg-raised: #16253d;
  --bg-elevated: #16253d;
  --bg-hover: rgba(255, 255, 255, .04);
  --bg-selected: rgba(255, 255, 255, .07);
  --bg-group: rgba(255, 255, 255, .025);
  --bg-bar: rgba(16, 29, 50, .88);
  --scrim: rgba(0, 0, 0, .55);
  --line-subtle: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  --text-1: #edf3ff;
  --text-2: #cbd8ec;
  --text-3: #a9bbd5;
  --text-4: #7185a3;

  --danger: #ffaaa8;
  --danger-soft: rgba(245, 101, 101, .12);
  --danger-line: rgba(245, 101, 101, .35);
  --warn: #f4c078;
  --warn-soft: rgba(244, 184, 84, .12);
  --warn-line: rgba(244, 184, 84, .35);
  --accent: #345888;
  --accent-hover: #294a78;
  --accent-text: #b4d0f8;
  --accent-soft: rgba(132, 178, 245, .10);
  --accent-border: rgba(150, 191, 250, .35);
  --focus-ring: #b4d0f8;
  --on-accent: #ffffff;

  --shadow-low: 0 2px 4px rgba(0, 0, 0, .08);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, .16);
  --shadow-high: 0 8px 28px rgba(0, 0, 0, .25);
  --card-shadow: 0 4px 16px -10px rgba(0, 0, 0, .22);
  --lift: var(--shadow-high), 0 0 0 1px var(--line-strong);

  --glass: var(--panel-glass);
  --glass-strong: var(--bg-selected);
  --glass-line: var(--glass-edge);
  --accent-grad: var(--accent-text);
  --accent-glow: none;
  --danger-glow: none;
  --warn-glow: none;
}

/* ── Light ──────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: only light;
  --nutrition-kcal: #587b70;
  --nutrition-protein: #677ea3;
  --nutrition-fat: #986b36;
  --nutrition-carbs: #8d7196;
  --canvas-top: #e5e5ed;
  --canvas-bottom: #eaddd6;
  --panel-glass: rgba(255, 255, 255, .60);
  --glass-edge: rgba(255, 255, 255, .65);
  --ink: #34312f;
  --on-ink: #ffffff;
  --ink-muted: #ded9d2;

  --bg-sidebar: #eee9e5;
  --bg-app: #eee9e5;
  --bg-card: #f6f5f2;
  --bg-raised: #faf9f6;
  --bg-elevated: #f6f5f2;
  --bg-hover: rgba(43, 38, 32, .035);
  --bg-selected: rgba(43, 38, 32, .06);
  --bg-group: rgba(43, 38, 32, .022);
  --bg-bar: rgba(250, 249, 246, .80);
  --scrim: rgba(30, 27, 23, .22);
  --line-subtle: rgba(55, 49, 43, .07);
  --line: rgba(55, 49, 43, .10);
  --line-strong: rgba(55, 49, 43, .17);

  --text-1: #292623;
  --text-2: #49443f;
  --text-3: #615b55;
  --text-4: #918980;

  --danger: #a51c26;
  --danger-soft: rgba(181, 31, 41, .08);
  --danger-line: rgba(181, 31, 41, .35);
  --warn: #77480e;
  --warn-soft: rgba(130, 80, 14, .08);
  --warn-line: rgba(130, 80, 14, .35);
  --accent: #514d49;
  --accent-hover: #44403c;
  --accent-text: #56514d;
  --accent-soft: rgba(83, 76, 67, .07);
  --accent-border: rgba(83, 76, 67, .28);
  --focus-ring: #56514d;
  --on-accent: #ffffff;

  --shadow-low: 0 1px 4px -1px rgba(53, 45, 36, .07);
  --shadow-medium: 0 4px 18px rgba(53, 45, 36, .08);
  --shadow-high: 0 8px 28px rgba(53, 45, 36, .12);
  --card-shadow: 0 10px 28px -12px rgba(53, 45, 36, .14);
  --lift: var(--shadow-high), 0 0 0 1px var(--line-strong);

  --glass: var(--panel-glass);
  --glass-strong: var(--bg-selected);
  --glass-line: var(--glass-edge);
  --accent-grad: var(--accent-text);
  --accent-glow: none;
  --danger-glow: none;
  --warn-glow: none;
}

/* «Системная» (no data-theme) and the no-JS case follow the system setting.
   Keep identical to the block above (asserted by test/contrast.test.mjs). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: only light;
    --nutrition-kcal: #587b70;
    --nutrition-protein: #677ea3;
    --nutrition-fat: #986b36;
    --nutrition-carbs: #8d7196;
    --canvas-top: #e5e5ed;
    --canvas-bottom: #eaddd6;
    --panel-glass: rgba(255, 255, 255, .60);
    --glass-edge: rgba(255, 255, 255, .65);
    --ink: #34312f;
    --on-ink: #ffffff;
    --ink-muted: #ded9d2;

    --bg-sidebar: #eee9e5;
    --bg-app: #eee9e5;
    --bg-card: #f6f5f2;
    --bg-raised: #faf9f6;
    --bg-elevated: #f6f5f2;
    --bg-hover: rgba(43, 38, 32, .035);
    --bg-selected: rgba(43, 38, 32, .06);
    --bg-group: rgba(43, 38, 32, .022);
    --bg-bar: rgba(250, 249, 246, .80);
    --scrim: rgba(30, 27, 23, .22);
    --line-subtle: rgba(55, 49, 43, .07);
    --line: rgba(55, 49, 43, .10);
    --line-strong: rgba(55, 49, 43, .17);

    --text-1: #292623;
    --text-2: #49443f;
    --text-3: #615b55;
    --text-4: #918980;

    --danger: #a51c26;
    --danger-soft: rgba(181, 31, 41, .08);
    --danger-line: rgba(181, 31, 41, .35);
    --warn: #77480e;
    --warn-soft: rgba(130, 80, 14, .08);
    --warn-line: rgba(130, 80, 14, .35);
    --accent: #514d49;
    --accent-hover: #44403c;
    --accent-text: #56514d;
    --accent-soft: rgba(83, 76, 67, .07);
    --accent-border: rgba(83, 76, 67, .28);
    --focus-ring: #56514d;
    --on-accent: #ffffff;

    --shadow-low: 0 1px 4px -1px rgba(53, 45, 36, .07);
    --shadow-medium: 0 4px 18px rgba(53, 45, 36, .08);
    --shadow-high: 0 8px 28px rgba(53, 45, 36, .12);
    --card-shadow: 0 10px 28px -12px rgba(53, 45, 36, .14);
    --lift: var(--shadow-high), 0 0 0 1px var(--line-strong);

    --glass: var(--panel-glass);
    --glass-strong: var(--bg-selected);
    --glass-line: var(--glass-edge);
    --accent-grad: var(--accent-text);
    --accent-glow: none;
    --danger-glow: none;
    --warn-glow: none;
  }
}

/* ── Device adjustments ─────────────────────────────────────────────────── */
@media (pointer: coarse) {
  :root {
    --control-h: 40px;
    --input-h: 40px;
  }
}
@media (max-width: 700px) {
  :root {
    --header-h: calc(84px + env(safe-area-inset-top));
    --content-pad: 16px;
    --row-h: 44px;
    --row-h-2: 56px;
  }
}

/* ── Accessibility preferences ──────────────────────────────────────────── */
/* The selector list matches the specificity of the theme blocks so these win. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme], :root:not([data-theme]) {
    --panel-glass: var(--bg-card);
    --glass: var(--bg-card);
    --glass-strong: var(--bg-selected);

    --bg-bar: var(--bg-elevated);
    --bar-blur: none;
  }
}
@media (prefers-contrast: more) {
  :root, :root[data-theme], :root:not([data-theme]) {
    --panel-glass: var(--bg-card);
    --glass: var(--bg-card);
    --glass-strong: var(--bg-selected);

    --text-3: var(--text-2);
    --text-4: var(--text-3);
    --line-subtle: var(--line-strong);
    --line: var(--line-strong);
    --bg-bar: var(--bg-elevated);
    --bar-blur: none;
  }
}