/* public/look-apple/tokens.css — the NEW look's tokens ("Deepslate", dark only; specs/redesign/spec.md §3). Loaded only when
   the server marks <html data-look="apple"> (lib/web/panel-look.js); every selector starts with html[data-look="apple"], which
   also outweighs ui.css's :root. Two halves:
     1. the new tokens (surfaces, labels, the ore roles, materials, type, geometry, motion);
     2. the remap of the classic tokens, so every classic rule that reads them follows on its own.
   The classic --blue / --green / --red become TEXT colours: every classic rule that uses them as a FILL is overridden in
   base.css (and in the areas' page files). tests/panel-look-tokens.test.js reads this file and recomputes the contrast of
   every pair of §3.1. */

html[data-look="apple"] {
  color-scheme: dark;

  /* ---- 1. surfaces (content layer, opaque) ---- */
  --bg: #0E1014;            /* page: deepslate */
  --s1: #171A20;            /* groups, cards, rows, sidebar, sheets */
  --s2: #20242C;            /* fields, chips, nested rows */
  --s3: #2B3039;            /* gray buttons, switch-off track, avatars (never label-3 on it) */
  --sunk: #090A0D;          /* console, code blocks */
  --bar-solid: #13161B;     /* opaque bars: phones, reduced transparency, increased contrast */
  --sep: rgba(160, 170, 190, .14);
  --sep-strong: rgba(160, 170, 190, .26);

  /* labels ("Bone") */
  --label: #F2F4F8;
  --label-2: #AEB4C0;
  --label-3: #858C9A;
  --label-4: #4B515D;       /* decoration only, never text */

  /* round 13 (H, the user 2026-10-23: "red blue and green feel really dark"): Lapis / Emerald / Redstone take the CLASSIC
     look's values (ui.css: --blue #0a84ff, --green #30d158, --red #ff453a; its tints .badge.blue .2, .badge.on / .off .18).
     The fills, the tints and Emerald's text are the classic values exactly; the two TEXT variants that failed 4.5:1 with the
     classic value (on s2 / s3, on their own tint, and on their tint over a segmented control's track — the console's selected
     level) are lightened minimally toward white: accent-text #0A84FF +32.5 % = #5AACFF, bad-text #FF453A +29 % = #FF7B73
     (tests/panel-look-tokens.test.js recomputes every pair). A white label on a Lapis / Redstone fill reads 3.65 / 3.41:1
     there, as in the classic look. */

  /* Lapis = act / select, nothing else */
  --accent: #0A84FF;
  --accent-hover: #2793FF;
  --accent-press: #0974E0;
  --accent-text: #5AACFF;
  --accent-tint: rgba(10, 132, 255, .20);

  /* signals: Emerald online / good, Redstone offline / error / destructive, Gold waiting / warning, Amethyst voice */
  --ok: #30D158;
  --ok-text: #30D158;
  --ok-tint: rgba(48, 209, 88, .18);
  --bad: #FF453A;
  --bad-text: #FF7B73;
  --bad-tint: rgba(255, 69, 58, .18);
  --warn: #E9A93A;
  --warn-text: #F4C060;
  --warn-tint: rgba(233, 169, 58, .18);
  --voice: #7C4DDF;
  --voice-text: #C29BFF;
  --voice-tint: rgba(124, 77, 223, .22);

  /* the Live Island + the segmented control */
  --island: #000000;
  --seg-track: rgba(118, 124, 140, .20);
  --seg-thumb: #474D59;
  --neutral-tint: rgba(255, 255, 255, .08);
  --hover: rgba(255, 255, 255, .03);
  --press: rgba(255, 255, 255, .07);

  /* materials (functional layer: glass on desktop only, at most four surfaces) */
  --glass-fill: rgba(22, 25, 31, .78);
  --glass: blur(24px) saturate(140%);
  --map-glass-fill: rgba(14, 16, 20, .62);
  --map-glass: blur(16px) saturate(140%);
  --map-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .10);
  --map-solid: rgba(14, 16, 20, .86);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-3: 0 28px 80px rgba(0, 0, 0, .6);

  /* type: system stacks only, no web font */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --fs-large: 30px; --lh-large: 36px;
  --fs-title: 20px; --lh-title: 26px;
  --fs-head: 15px; --lh-head: 20px;
  --fs-body: 15px; --lh-body: 22px;
  --fs-callout: 14px; --lh-callout: 20px;
  --fs-foot: 13px; --lh-foot: 18px;
  --fs-cap: 12px; --lh-cap: 16px;
  --fs-mono: 13px; --lh-mono: 18px;
  --fs-input: 15px;

  /* geometry */
  --r-xs: 6px; --r-s: 8px; --r-m: 10px; --r-l: 14px; --r-xl: 20px; --r-sheet: 28px; --r-cap: 999px;
  --row-h: 44px;
  --ctl-h: 32px;
  --ctl-h-big: 40px;
  --gutter: 32px;
  --tabbar-h: 56px;

  /* motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- 2. the classic tokens, remapped (ui.css / admin.css / manager.css follow on their own) ---- */
  --bg2: var(--sunk);
  --card: var(--s1);
  --card2: var(--s2);
  --card3: var(--s3);
  --tile: var(--s3);
  --card-hover: #1C1F26;
  --border: var(--sep-strong);
  --border-soft: var(--s2);
  --text: var(--label);
  --dim: var(--label-2);
  --dim2: var(--label-3);
  --blue: var(--accent-text);
  --teal: var(--accent-text);
  --indigo: var(--accent-text);
  --green: var(--ok-text);
  --red: var(--bad-text);
  --yellow: var(--warn-text);
  --orange: var(--warn-text);
  --purple: var(--voice-text);
  --gray: var(--label-3);
  --focus: #474D59;
  --ring: rgba(10, 132, 255, .45); /* (round 13 H: the classic blue, the new look's alpha) */
  --danger-bg: var(--bad-tint);
  --success-bg: var(--ok-tint);
  --radius: 14px;
  --radius-s: 10px;
  --font: var(--font-text);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --shadow: var(--shadow-3);
  --shadow-s: var(--shadow-2);
  --t: 200ms cubic-bezier(.22, .61, .36, 1);
  --topbar-h: 52px;
  --side-w: 248px;
}

/* phone: the type ramp and the control sizes grow (inputs 17 px: iOS zooms a focused field under 16) */
@media (max-width: 860px) {
  html[data-look="apple"] {
    --fs-large: 34px; --lh-large: 41px;
    --fs-title: 22px; --lh-title: 28px;
    --fs-head: 17px; --lh-head: 22px;
    --fs-body: 17px; --lh-body: 22px;
    --fs-callout: 16px; --lh-callout: 21px;
    --fs-input: 17px;
    --r-l: 16px;
    --row-h: 48px;
    --ctl-h: 44px;
    --ctl-h-big: 50px;
    --gutter: 16px;
    --topbar-h: 48px;
  }
}

/* increased contrast: lighter secondary labels, stronger hairlines (the opaque bars are in base.css) */
@media (prefers-contrast: more) {
  html[data-look="apple"] {
    --label-2: #C7CCD6;
    --label-3: #A3AAB8;
    --sep: rgba(200, 208, 222, .32);
  }
}

/* reduced motion: every duration drops to 1 ms */
@media (prefers-reduced-motion: reduce) {
  html[data-look="apple"] {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --t: 1ms linear;
  }
}