/*
 * Graphite & Berry design tokens (SPEC §2.1–2.4).
 * The dashboard copies this file verbatim, so it must stay framework-free.
 * Theme selection: <html data-theme="light|dark|system">. "system" follows the OS.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #FCFCFD;
  --bg-sidebar: #F4F4F6;
  --bg-elevated: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-subtle: #F1F1F4;
  --bg-inset: #EDEDF1;
  --bg-hover: rgba(24, 22, 36, .045);
  --bg-active: rgba(24, 22, 36, .08);
  --bg-overlay: rgba(14, 13, 20, .32);
  /* Lists and grids of rows on the canvas, and the small wells (masked keys, glyph tiles) inside them. */
  --bg-list: var(--bg-raised);
  --bg-well: var(--bg-subtle);
  --border: rgba(24, 22, 36, .09);
  --border-strong: rgba(24, 22, 36, .16);
  --border-focus: rgba(106, 69, 232, .55);
  --text: #18171D;
  --text-2: #52505C;
  --text-3: #64626E;
  --text-4: #A3A1AC;
  --text-on-accent: #FFFFFF;
  --text-on-ink: #FFFFFF;
  --ink: #18171D;
  --ink-hover: #2A2933;
  --accent: #6A45E8;
  --accent-hover: #5B37DB;
  --accent-ink: #5634D1;
  --accent-tint: rgba(106, 69, 232, .10);
  --accent-tint-2: rgba(106, 69, 232, .16);
  --berry-gradient: linear-gradient(135deg, #7A4DFF 0%, #B84BDD 55%, #FF5E8A 100%);
  --success: #14915A;
  --success-tint: rgba(20, 145, 90, .10);
  --warning: #B7700B;
  --warning-tint: rgba(183, 112, 11, .12);
  --danger: #D63A40;
  --danger-tint: rgba(214, 58, 64, .10);
  --info: #2F6FE4;
  --info-tint: rgba(47, 111, 228, .10);
  --provider-codex: #18171D;
  --provider-claude: #D97757;
  --shadow-1: 0 1px 2px rgba(16, 14, 30, .05), 0 0 0 1px var(--border);
  --shadow-pop: 0 16px 36px -10px rgba(16, 14, 30, .20), 0 3px 8px -2px rgba(16, 14, 30, .06), 0 0 0 1px var(--border);
  --shadow-dialog: 0 28px 70px -16px rgba(16, 14, 30, .32), 0 0 0 1px var(--border);
  --shadow-composer: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 24px -12px rgba(16, 14, 30, .14), 0 0 0 1px var(--border);
  /* Derived (not in the spec table; kept as aliases so components never hard-code colors). */
  --scrollbar-thumb: var(--border-strong);
  --selection: rgba(106, 69, 232, .18);
  --code-bg: var(--bg-subtle);
  --diff-add: rgba(20, 145, 90, .10);
  --diff-add-text: #0C7145;
  --diff-del: rgba(214, 58, 64, .09);
  --diff-del-text: #B22A30;
  --success-ink: #0C7145;
  --warning-ink: #8F5600;
  --danger-ink: #B42B31;
  --info-ink: #2159C4;
  --text-on-danger: #FFFFFF;
  --tooltip-bg: #18171D;
  --tooltip-text: #F4F4F6;
  --switch-thumb-off: #FFFFFF;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0E0E11;
  --bg-sidebar: #131317;
  --bg-elevated: #17171C;
  --bg-raised: #1E1E24;
  --bg-subtle: #1A1A1F;
  --bg-inset: #111115;
  --bg-hover: rgba(255, 255, 255, .05);
  --bg-active: rgba(255, 255, 255, .085);
  --bg-overlay: rgba(0, 0, 0, .55);
  --bg-list: var(--bg-subtle);
  --bg-well: var(--bg-inset);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --border-focus: rgba(157, 131, 255, .6);
  --text: #EDEDF1;
  --text-2: #B5B4BF;
  --text-3: #9C9BA6;
  --text-4: #5F5E69;
  --ink: #EDEDF1;
  --ink-hover: #FFFFFF;
  --text-on-ink: #111114;
  /* White on #9D83FF is under 3:1; dark text keeps accent buttons legible (≈6.4:1). */
  --text-on-accent: #141118;
  --accent: #9D83FF;
  --accent-hover: #B09BFF;
  --accent-ink: #BBA9FF;
  --accent-tint: rgba(157, 131, 255, .14);
  --accent-tint-2: rgba(157, 131, 255, .22);
  --success: #3CCB86;
  --success-tint: rgba(60, 203, 134, .14);
  --warning: #F0B04A;
  --warning-tint: rgba(240, 176, 74, .14);
  --danger: #FF6B70;
  --danger-tint: rgba(255, 107, 112, .14);
  --info: #6EA2FF;
  --info-tint: rgba(110, 162, 255, .14);
  /* The light codex ink would vanish on graphite. */
  --provider-codex: #EDEDF1;
  --shadow-1: 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .03);
  --shadow-pop: 0 18px 40px -8px rgba(0, 0, 0, .6), 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-dialog: 0 30px 80px -10px rgba(0, 0, 0, .7), 0 0 0 1px var(--border-strong);
  --shadow-composer: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px -14px rgba(0, 0, 0, .7), 0 0 0 1px var(--border);
  --selection: rgba(157, 131, 255, .28);
  --diff-add: rgba(60, 203, 134, .12);
  --diff-add-text: #5ED69B;
  --diff-del: rgba(255, 107, 112, .12);
  --diff-del-text: #FF8A8E;
  --success-ink: #3CCB86;
  --warning-ink: #F0B04A;
  --danger-ink: #FF8A8E;
  --info-ink: #8DB6FF;
  --text-on-danger: #1A0B0C;
  --tooltip-bg: #2A2A31;
  --tooltip-text: #EDEDF1;
  --switch-thumb-off: #A9A8B3;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg-canvas: #0E0E11;
    --bg-sidebar: #131317;
    --bg-elevated: #17171C;
    --bg-raised: #1E1E24;
    --bg-subtle: #1A1A1F;
    --bg-inset: #111115;
    --bg-hover: rgba(255, 255, 255, .05);
    --bg-active: rgba(255, 255, 255, .085);
    --bg-overlay: rgba(0, 0, 0, .55);
    --bg-list: var(--bg-subtle);
    --bg-well: var(--bg-inset);
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .14);
    --border-focus: rgba(157, 131, 255, .6);
    --text: #EDEDF1;
    --text-2: #B5B4BF;
    --text-3: #9C9BA6;
    --text-4: #5F5E69;
    --ink: #EDEDF1;
    --ink-hover: #FFFFFF;
    --text-on-ink: #111114;
    --text-on-accent: #141118;
    --accent: #9D83FF;
    --accent-hover: #B09BFF;
    --accent-ink: #BBA9FF;
    --accent-tint: rgba(157, 131, 255, .14);
    --accent-tint-2: rgba(157, 131, 255, .22);
    --success: #3CCB86;
    --success-tint: rgba(60, 203, 134, .14);
    --warning: #F0B04A;
    --warning-tint: rgba(240, 176, 74, .14);
    --danger: #FF6B70;
    --danger-tint: rgba(255, 107, 112, .14);
    --info: #6EA2FF;
    --info-tint: rgba(110, 162, 255, .14);
    --provider-codex: #EDEDF1;
    --shadow-1: 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .03);
    --shadow-pop: 0 18px 40px -8px rgba(0, 0, 0, .6), 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .04);
    --shadow-dialog: 0 30px 80px -10px rgba(0, 0, 0, .7), 0 0 0 1px var(--border-strong);
    --shadow-composer: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px -14px rgba(0, 0, 0, .7), 0 0 0 1px var(--border);
    --selection: rgba(157, 131, 255, .28);
    --diff-add: rgba(60, 203, 134, .12);
    --diff-add-text: #5ED69B;
    --diff-del: rgba(255, 107, 112, .12);
    --diff-del-text: #FF8A8E;
    --success-ink: #3CCB86;
    --warning-ink: #F0B04A;
    --danger-ink: #FF8A8E;
    --info-ink: #8DB6FF;
    --text-on-danger: #1A0B0C;
    --tooltip-bg: #2A2A31;
    --tooltip-text: #EDEDF1;
    --switch-thumb-off: #A9A8B3;
  }
}

/* Type, space, radius, layout (SPEC §2.2–2.3). Theme independent. */
:root {
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", monospace;

  --text-display: 28px; --leading-display: 34px; --tracking-display: -0.022em;
  --text-title-1: 20px; --leading-title-1: 28px; --tracking-title-1: -0.015em;
  --text-title-2: 16px; --leading-title-2: 24px; --tracking-title-2: -0.01em;
  --text-body: 14px; --leading-body: 22px; --tracking-body: -0.003em;
  --text-reading: 15px; --leading-reading: 26px;
  --text-control: 13px; --leading-control: 18px;
  --text-caption: 12px; --leading-caption: 16px;
  --text-micro: 11px; --leading-micro: 14px;

  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px;

  --control-sm: 26px; --control-md: 30px; --control-lg: 36px; --control-xl: 44px; --control-send: 32px;

  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;

  --icon-sm: 14px; --icon-md: 16px;

  --sidebar-width: 260px; --sidebar-min: 220px; --sidebar-max: 360px;
  --inspector-width: 340px;
  --header-height: 48px;
  --thread-max: 760px;

  /* Semantic stacking scale; never use raw z-index values in components. */
  --z-raised: 1; --z-sticky: 10; --z-chrome: 20; --z-floating: 40;
  --z-overlay: 200; --z-dialog: 210; --z-popover: 300; --z-toast: 400; --z-tooltip: 500;
}

/* Compact density tightens rows and controls, never type. */
:root[data-density="compact"] {
  --control-md: 28px; --control-lg: 32px;
  --row-height: 28px;
}
:root { --row-height: 30px; }