/* tokens.css -- themes (light / dark) and tracks (internal / product).
   Pattern (mandatory): light on bare :root; dark under the media query guarded by
   :not([data-theme="light"]); dark again under [data-theme="dark"]. Tracks override
   only accent, document serif and density. Rooms read tokens; they never define colors. */

:root {
  color-scheme: light;

  /* type */
  --font-ui: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font-doc: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-display: 28px; --lh-display: 34px;
  --fs-h1: 22px; --lh-h1: 28px;
  --fs-h2: 17px; --lh-h2: 24px;
  --fs-body: 14px; --lh-body: 20px;
  --fs-meta: 13px; --lh-meta: 18px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-h3: 15px; --lh-h3: 22px;      /* round 7 (F1 / round 6 G1): region titles */
  --fs-doc: 17px; --lh-doc: 28px;
  --fs-box: 18px; --lh-box: 24px;
  --fs-micro: 11px;

  /* neutrals (light, slightly cool sand) */
  --bg-app: #fcfcfb;
  --bg-pane: #f7f7f5;
  --bg-hover: #efefec;
  --bg-raised: #ffffff;
  --line-subtle: #e7e6e2;
  --line: #d8d7d2;
  --line-strong: #c8c7c1;
  --text-placeholder: #72716b;   /* design 4.1 specifies #73726c; darkened one hex step -- see README round 5 note */
  --text-secondary: #5f5e58;
  --text: #1d1c19;
  --paper: #ffffff;
  --logo-plate: transparent;

  /* accent: ink blue (internal) */
  --accent: #2c4bb0;
  --accent-hover: #243f97;
  --accent-text: #2c4bb0;
  --accent-soft: #e6ebfa;
  --on-accent: #ffffff;
  --bg-selected: var(--accent-soft);
  --selected-bar: 3px;               /* round 7 (F19): selection = --bg-raised fill + accent left bar; focus = 2px ring */
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);

  /* urgency ramp (locked across tracks) */
  --urgency-1: #9a5a00;
  --urgency-2: #ad4000;
  --urgency-2-soft: #ffefd6;
  --urgency-3: #cc3036;
  --urgency-3-text: #ffffff;

  --ai-mark: rgb(110 86 207 / 0.6);

  /* shape */
  --r-control: 6px;
  --r-card: 8px;
  --r-dialog: 12px;
  --r-box: 14px;
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);
  --shadow-layer: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 32px rgb(0 0 0 / 0.10);
  --shadow-box: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px rgb(0 0 0 / 0.06);

  /* spacing (4px base) */
  --s-1: 2px; --s0: 4px; --s1: 8px; --s2: 12px; --s3: 16px; --s4: 20px;
  --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px; --s9: 64px;
  --gutter: 24px;
  --region-gap: 24px;                /* round 7 (F1 / round 6 G4): between regions in a rail or column */
  --field-gap: 8px;                  /* label to field, field to field */
  --row-pad-x: 10px;                 /* table cell and list row side padding */
  --pane-gutter: 16px;
  --card-pad: 16px;
  --rail-pad: 14px 16px 24px;
  --pane-head-h: 40px;

  /* frame (round 3: -h names are the documented tokens; the short names stay as aliases) */
  --bar-a-h: 52px;
  --bar-b-h: 48px;
  --bar-c-h: 40px;
  --bars-h: calc(var(--bar-a-h) + var(--bar-b-h) + var(--bar-c-h));
  --bar-a: var(--bar-a-h);
  --bar-b: var(--bar-b-h);
  --bar-c: var(--bar-c-h);
  --footer-h: 28px;

  /* round 5: the omnibar (see research/round5_design.md section 2.1) */
  --box-h-hero: 60px;
  --box-w-hero: 800px;
  --box-h-thread: 56px;
  --box-h-compact: 36px;
  --box-w-compact: 640px;

  /* density: comfortable default (round 7 / round 6 G4: 40 / 36) */
  --row-h: 40px;
  --control-h: 32px;
  --hit-min: 24px;                   /* WCAG 2.5.8 minimum target for compact controls */

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --t-press: 110ms;
  --t-menu-in: 150ms;
  --t-menu-out: 110ms;
  --t-fade: 150ms;
  --t-panel: 240ms;
  --t-collapse: 200ms;
  --t-flash: 600ms;
}

:root[data-density="compact"] {
  --row-h: 36px;
  --control-h: 28px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app: #111110;
    --bg-pane: #191918;
    --bg-hover: #222221;
    --bg-raised: #1c1c1a;
    --line-subtle: #2a2a28;
    --line: #3b3a37;
    --line-strong: #4a4946;
    --text-placeholder: #8a8880;
    --text-secondary: #b5b3ad;
    --text: #eeeeec;
    --paper: #1f1f1d;
    --logo-plate: #dcdcd9;
    --accent: #6d8cf0;
    --accent-hover: #86a0f4;
    --accent-text: #a9bcf8;
    --accent-soft: #1a2447;
    --on-accent: #0b1020;
    --urgency-1: #ffca16;
    --urgency-2: #ffa057;
    --urgency-2-soft: #331e0b;
    --urgency-3: #cc3036;
    --urgency-3-text: #ffffff;
    --ai-mark: rgb(170 153 236 / 0.7);
    --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
    --shadow-layer: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
    --shadow-box: 0 1px 2px rgb(0 0 0 / 0.50), 0 6px 20px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #111110;
  --bg-pane: #191918;
  --bg-hover: #222221;
  --bg-raised: #1c1c1a;
  --line-subtle: #2a2a28;
  --line: #3b3a37;
  --line-strong: #4a4946;
  --text-placeholder: #8a8880;
  --text-secondary: #b5b3ad;
  --text: #eeeeec;
  --paper: #1f1f1d;
  --logo-plate: #dcdcd9;
  --accent: #6d8cf0;
  --accent-hover: #86a0f4;
  --accent-text: #a9bcf8;
  --accent-soft: #1a2447;
  --on-accent: #0b1020;
  --urgency-1: #ffca16;
  --urgency-2: #ffa057;
  --urgency-2-soft: #331e0b;
  --urgency-3: #cc3036;
  --urgency-3-text: #ffffff;
  --ai-mark: rgb(170 153 236 / 0.7);
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-layer: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
  --shadow-box: 0 1px 2px rgb(0 0 0 / 0.50), 0 6px 20px rgb(0 0 0 / 0.45);
}

/* ---- product track: accent + serif only (density default set by core.js) ---- */
:root[data-track="product"] {
  --font-doc: "Newsreader", Georgia, "Times New Roman", serif;
  --accent: #0b7f71;
  --accent-hover: #0a7468;
  --accent-text: #00705f;
  --accent-soft: #e0f8f3;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-track="product"]:not([data-theme="light"]) {
    --accent: #12a594;
    --accent-hover: #1fb8a5;
    --accent-text: #0bd8b6;
    --accent-soft: #0d3d38;
    --on-accent: #04201c;
  }
}
:root[data-track="product"][data-theme="dark"] {
  --accent: #12a594;
  --accent-hover: #1fb8a5;
  --accent-text: #0bd8b6;
  --accent-soft: #0d3d38;
  --on-accent: #04201c;
}

/* ---- round 4: accent swatches (Setup / Admin firm.accent). core.js sets :root[data-accent] on the
   product track only, and only for a swatch other than 'default'; no attribute = today's accents.
   Amber, orange and red stay reserved for the urgency ramp. Light, then dark in the usual pattern. ---- */
:root[data-accent="teal"] {
  --accent: #0b7f71;
  --accent-hover: #0a7468;
  --accent-text: #00705f;
  --accent-soft: #e0f8f3;
  --on-accent: #ffffff;
}
:root[data-accent="ink"] {
  --accent: #2c4bb0;
  --accent-hover: #243f97;
  --accent-text: #2c4bb0;
  --accent-soft: #e6ebfa;
  --on-accent: #ffffff;
}
:root[data-accent="plum"] {
  --accent: #8a4a9e;
  --accent-hover: #773d89;
  --accent-text: #7c3f90;
  --accent-soft: #f5eaf7;
  --on-accent: #ffffff;
}
:root[data-accent="forest"] {
  --accent: #2f7a4b;
  --accent-hover: #276a40;
  --accent-text: #256b40;
  --accent-soft: #e3f2e8;
  --on-accent: #ffffff;
}
:root[data-accent="slate"] {
  --accent: #4a5a6e;
  --accent-hover: #3e4c5e;
  --accent-text: #465668;
  --accent-soft: #e8ecf1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-accent="teal"]:not([data-theme="light"]) {
    --accent: #12a594;
    --accent-hover: #1fb8a5;
    --accent-text: #0bd8b6;
    --accent-soft: #0d3d38;
    --on-accent: #04201c;
  }
  :root[data-accent="ink"]:not([data-theme="light"]) {
    --accent: #6d8cf0;
    --accent-hover: #86a0f4;
    --accent-text: #a9bcf8;
    --accent-soft: #1a2447;
    --on-accent: #0b1020;
  }
  :root[data-accent="plum"]:not([data-theme="light"]) {
    --accent: #c08ad2;
    --accent-hover: #cc9edb;
    --accent-text: #d9b3e5;
    --accent-soft: #33203a;
    --on-accent: #1d0f22;
  }
  :root[data-accent="forest"]:not([data-theme="light"]) {
    --accent: #5fb883;
    --accent-hover: #74c595;
    --accent-text: #8fd3aa;
    --accent-soft: #16301f;
    --on-accent: #06170c;
  }
  :root[data-accent="slate"]:not([data-theme="light"]) {
    --accent: #93a4b8;
    --accent-hover: #a6b5c6;
    --accent-text: #bcc8d6;
    --accent-soft: #1f2833;
    --on-accent: #0d1218;
  }
}
:root[data-accent="teal"][data-theme="dark"] {
  --accent: #12a594;
  --accent-hover: #1fb8a5;
  --accent-text: #0bd8b6;
  --accent-soft: #0d3d38;
  --on-accent: #04201c;
}
:root[data-accent="ink"][data-theme="dark"] {
  --accent: #6d8cf0;
  --accent-hover: #86a0f4;
  --accent-text: #a9bcf8;
  --accent-soft: #1a2447;
  --on-accent: #0b1020;
}
:root[data-accent="plum"][data-theme="dark"] {
  --accent: #c08ad2;
  --accent-hover: #cc9edb;
  --accent-text: #d9b3e5;
  --accent-soft: #33203a;
  --on-accent: #1d0f22;
}
:root[data-accent="forest"][data-theme="dark"] {
  --accent: #5fb883;
  --accent-hover: #74c595;
  --accent-text: #8fd3aa;
  --accent-soft: #16301f;
  --on-accent: #06170c;
}
:root[data-accent="slate"][data-theme="dark"] {
  --accent: #93a4b8;
  --accent-hover: #a6b5c6;
  --accent-text: #bcc8d6;
  --accent-soft: #1f2833;
  --on-accent: #0d1218;
}