/* DSX design tokens.
   Layer 1  primitives: raw values, never used by a component.
   Layer 2  surfaces: what a screen is painted with (ink or paper).
   Layer 3  brands: everything a white-label partner may change.
   Components only read layer 2 and layer 3 tokens. A new brand is one more [data-brand] block. */

:root {
  /* 1. Primitives */
  --p-ink: #24272b;
  --p-ink-1: #2c3034;
  --p-ink-2: #35393d;
  --p-ink-3: #42464a;
  --p-ink-4: #505459;
  --p-grey-1: #a6a8a7;
  --p-grey-2: #c2c3bf;
  --p-slab: #ccc7bc;
  --p-paper-3: #d8d3ca;
  --p-paper-2: #e3ded5;
  --p-paper-1: #f3efe7;
  --p-paper: #ede9e1;
  --p-light-text: #e2dfd7;
  --p-light-panel-rule: #aaa59b;
  --p-grey-ink: #5c5e5f;
  --p-grey-slab: #4d4f51;

  /* Type */
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-label: 11px;
  --t-small: 12.5px;
  --t-base: 14px;
  --t-lead: 16px;
  --t-h3: 18px;
  --t-h2: 24px;
  --t-h1: 32px;
  --t-kpi: 30px;
  --t-hero: 44px;
  --lh-tight: 1.1;
  --lh-ui: 1.4;
  --lh-text: 1.55;

  /* Space, on a 4 px step */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* Lines */
  --line-hair: 1px;
  --line: 1.5px;
  --line-head: 4px;

  /* Motion. Explains a transition, never delays a finished action. */
  --ease: cubic-bezier(.2, .75, 0, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Layout */
  --rail-w: 232px;
  --top-h: 56px;
  --drawer-w: 460px;
  --ticket-w: 332px;
  --tap: 44px;
  --ctl: 36px;
}

/* 2. Surfaces */
[data-surface="ink"] {
  --bg: var(--p-ink);
  --raise: var(--p-ink-1);
  --wash: var(--p-ink-2);
  --fg: var(--p-light-text);
  --fg-2: var(--p-grey-2);
  --muted: var(--p-grey-1);
  --rule: var(--p-ink-3);
  --rule-2: var(--p-ink-4);
  --overlay: rgba(0, 0, 0, .62);
  color-scheme: dark;
}
[data-surface="paper"] {
  --bg: var(--p-paper);
  --raise: var(--p-paper-1);
  --wash: var(--p-paper-2);
  --fg: var(--p-ink);
  --fg-2: var(--p-ink-4);
  --muted: var(--p-grey-ink);
  --rule: var(--p-paper-3);
  --rule-2: var(--p-grey-2);
  --overlay: rgba(11, 11, 11, .36);
  color-scheme: light;
}

/* 3. Brands: accent, slab, identity. Default brand = the DotSquareX look. */
[data-brand] {
  --accent: var(--fg);
  --on-accent: var(--bg);
  --slab: var(--p-slab);
  --on-slab: var(--p-ink);
  --on-slab-2: var(--p-grey-slab);
  --slab-rule: var(--p-light-panel-rule);
  --skew: -14.5deg;
  --lean: 1;
  --radius: 5px;
  --radius-lg: 14px;
  --display-width: 125%;
  --display-weight: 700;
  --display-tracking: -.02em;
}
[data-brand="beta"] {
  --bg: #e7e8e3;
  --raise: #eef0eb;
  --wash: #dfe2db;
  --fg: #303a36;
  --fg-2: #46534d;
  --muted: #525e57;
  --rule: #cbd1c8;
  --rule-2: #aeb8af;
  --slab: #d6dfd7;
  --on-slab: #2e4038;
  --on-slab-2: #495a51;
  --slab-rule: #a2b0a5;
  --bridge-inset: 0px;
  --skew: 0deg;
  --lean: 0;
  --radius: 2px;
  --radius-lg: 2px;
  --display-width: 75%;
  --display-weight: 700;
  --display-tracking: -.01em;
}

/* Inverted scope: any component placed in a slab or an operator band keeps working. */
.slab-scope {
  --bg: var(--slab);
  --raise: color-mix(in srgb, var(--on-slab) 6%, var(--slab));
  --wash: color-mix(in srgb, var(--on-slab) 10%, var(--slab));
  --fg: var(--on-slab);
  --fg-2: var(--on-slab-2);
  --muted: var(--on-slab-2);
  --rule: var(--slab-rule);
  --rule-2: color-mix(in srgb, var(--on-slab) 55%, var(--slab));
  --accent: var(--on-slab);
  --on-accent: var(--slab);
  background: var(--bg);
  color: var(--fg);
}

/* Locally hosted variable fonts; no third-party requests are needed. */
@font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo.ttf') format('truetype'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; src: url('/fonts/martian-mono.ttf') format('truetype'); }