/* GlirOS design tokens (phase D1).
   One source of truth for colour, glass, type, spacing and motion, shared by
   the desktop app, LAN browsers and (later) the gliros.com web app. Dark is
   the default; light follows the system, or data-theme on <html> forces one.
   The values come from the gliros-web layout pass. See docs/DESIGN.md. */

:root {
  /* colour */
  --bg: #0e1719;               /* page base; also the window frame colour */
  --surface: rgba(18, 28, 30, 0.86);       /* cards, menus, assistant messages */
  --surface-solid: #142023;
  --glass: rgba(16, 26, 28, 0.55);         /* frosted panels (sidebar, output) */
  --glass-strong: rgba(14, 23, 25, 0.76);  /* composer, overlays on narrow screens */
  --glass-border: rgba(210, 235, 225, 0.10);
  --inset: rgba(8, 15, 17, 0.55);          /* inputs, code blocks */
  --border: rgba(190, 225, 210, 0.12);
  --text: #e3ece7;
  --text-dim: #9db2a9;
  --text-faint: #7a8f86;
  /* 0.1.81zzz31: the design chat's chart colours (claude/gliros-portal-b25-reply.md §2.4), shared with office */
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-6: #6b7a73;
  --accent: #8cc4a3;
  --accent-hover: #a1d3b5;
  --accent-soft: rgba(140, 196, 163, 0.16);
  --on-accent: #0c1a14;
  --on-danger: #2a0e0e;        /* 0.1.49: text on a danger fill, 6.7:1 (white was 2.7:1) */
  --user-bg: rgba(94, 150, 120, 0.30);
  --user-border: rgba(140, 196, 163, 0.35);
  --good: #6fd3a0;
  --warn: #e2b35e;
  --danger: #ef7b7b;
  --danger-soft: rgba(239, 123, 123, 0.14);
  --tint: linear-gradient(180deg, rgba(5, 10, 12, 0.40) 0%, rgba(5, 10, 12, 0.62) 100%);
  --tint-top: rgba(5, 10, 12, 0.40);       /* what the window frame colour is mixed with */
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.14);
  --focus: 0 0 0 2px rgba(140, 196, 163, 0.55);
  /* code: see-through dark panels and colours that sit with the green accent */
  --code-bg: rgba(4, 10, 12, 0.42);
  --hl-keyword: #7fcfa4;
  --hl-string: #e2c28a;
  --hl-number: #e6a57a;
  --hl-comment: #6f857c;
  --hl-title: #9fd0e6;
  --hl-attr: #b7c6f0;
  --hl-builtin: #c7b4ef;
  --hl-meta: #d7a8c8;
  --hl-deleted: rgba(239, 123, 123, 0.16);
  --hl-added: rgba(111, 211, 160, 0.14);

  /* glass */
  --blur: 18px;
  --bg-blur: 22px;

  /* type */
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --text-2xs: 0.68rem;          /* DESIGN-1 B: badges, tags and the timeline's dense labels */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.94rem;
  --text-lg: 1.15rem;
  --text-xl: 1.6rem;
  --line: 1.6;

  /* space and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* layout */
  --sidebar-w: 272px;
  --rail-w: 64px;
  --output-w: 460px;
  --chat-max-w: 820px;
  --topbar-h: 56px;

  /* motion */
  --fast: 0.15s ease;
  --medium: 0.22s ease;
  --bg-fade: 2.8s ease;
  --pulse: 1.2s;         /* 0.1.81zzz37: the sidebar's "writing" mark */

  color-scheme: dark;
}

/* Light: same names, light values. Kept in two blocks (system setting, or
   forced with data-theme="light") because CSS can't share one block. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef3ef;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-solid: #ffffff;
    --glass: rgba(248, 251, 249, 0.58);
    --glass-strong: rgba(250, 252, 251, 0.80);
    --glass-border: rgba(255, 255, 255, 0.65);
    --inset: rgba(240, 245, 242, 0.75);
    --border: rgba(40, 70, 58, 0.14);
    --text: #1c2a25;
    --text-dim: #56675f;
    --text-faint: #627069;
    /* the chart colours, light */
    --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #9aa5a0;
    --accent: #3f6f56;
    --accent-hover: #335d48;
    --accent-soft: rgba(63, 111, 86, 0.13);
    --on-accent: #ffffff;
    --on-danger: #ffffff;
    --user-bg: rgba(63, 111, 86, 0.16);
    --user-border: rgba(63, 111, 86, 0.28);
    --good: #287a52;      /* 0.1.49: small text 4.7:1 on bg (was 3.8) */
    --warn: #8a5f12;      /* 0.1.49: 5.0:1 (was 3.3) */
    --danger: #b23c3c;    /* 0.1.49: 5.2:1 (was 4.4) */
    --danger-soft: rgba(178, 60, 60, 0.10);
    --tint: linear-gradient(180deg, rgba(240, 245, 242, 0.50) 0%, rgba(232, 239, 235, 0.68) 100%);
    --tint-top: rgba(240, 245, 242, 0.50);
    --shadow: 0 10px 34px rgba(30, 50, 40, 0.14);
    --shadow-soft: 0 4px 16px rgba(30, 50, 40, 0.08);
    --focus: 0 0 0 2px rgba(63, 111, 86, 0.45);
    --code-bg: rgba(255, 255, 255, 0.55);
    --hl-keyword: #2f7a54;
    --hl-string: #9a6212;
    --hl-number: #b0521f;
    --hl-comment: #627069;  /* 0.1.49: 5.0:1 on code-bg (was 3.3) */
    --hl-title: #1f6f8b;
    --hl-attr: #4a5bb0;
    --hl-builtin: #7a4fb3;
    --hl-meta: #a0457a;
    --hl-deleted: rgba(192, 72, 72, 0.12);
    --hl-added: rgba(47, 138, 94, 0.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #eef3ef;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --glass: rgba(248, 251, 249, 0.58);
  --glass-strong: rgba(250, 252, 251, 0.80);
  --glass-border: rgba(255, 255, 255, 0.65);
  --inset: rgba(240, 245, 242, 0.75);
  --border: rgba(40, 70, 58, 0.14);
  --text: #1c2a25;
  --text-dim: #56675f;
  --text-faint: #627069;
  /* the chart colours, light */
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #9aa5a0;
  --accent: #3f6f56;
  --accent-hover: #335d48;
  --accent-soft: rgba(63, 111, 86, 0.13);
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --user-bg: rgba(63, 111, 86, 0.16);
  --user-border: rgba(63, 111, 86, 0.28);
  --good: #287a52;      /* 0.1.49: small text 4.7:1 on bg (was 3.8) */
  --warn: #8a5f12;      /* 0.1.49: 5.0:1 (was 3.3) */
  --danger: #b23c3c;    /* 0.1.49: 5.2:1 (was 4.4) */
  --danger-soft: rgba(178, 60, 60, 0.10);
  --tint: linear-gradient(180deg, rgba(240, 245, 242, 0.50) 0%, rgba(232, 239, 235, 0.68) 100%);
  --tint-top: rgba(240, 245, 242, 0.50);
  --shadow: 0 10px 34px rgba(30, 50, 40, 0.14);
  --shadow-soft: 0 4px 16px rgba(30, 50, 40, 0.08);
  --focus: 0 0 0 2px rgba(63, 111, 86, 0.45);
  --code-bg: rgba(255, 255, 255, 0.55);
  --hl-keyword: #2f7a54;
  --hl-string: #9a6212;
  --hl-number: #b0521f;
  --hl-comment: #627069;  /* 0.1.49: 5.0:1 on code-bg (was 3.3) */
  --hl-title: #1f6f8b;
  --hl-attr: #4a5bb0;
  --hl-builtin: #7a4fb3;
  --hl-meta: #a0457a;
  --hl-deleted: rgba(192, 72, 72, 0.12);
  --hl-added: rgba(47, 138, 94, 0.12);
  color-scheme: light;
}