/* Asset4040 design tokens — v0.2 "Graphite & Ember".
   Every colour, size and duration in the UI derives from this file. */

@font-face {
  font-family: 'Archivo A4';
  src: url('/shared/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans A4';
  src: url('/shared/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono A4';
  src: url('/shared/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Graphite: warm-neutral blacks, lifted in small steps for depth. */
  --ink-0: #09090a;   /* page */
  --ink-1: #0e0e10;   /* sunken wells */
  --ink-2: #141416;   /* surfaces */
  --ink-3: #1b1b1e;   /* raised */
  --ink-4: #242428;   /* hover / pressed */
  --line-1: #1f1f23;
  --line-2: #2c2c31;
  --line-3: #3e3e45;

  --text-1: #eeece8;  /* primary */
  --text-2: #a9a6a0;  /* secondary */
  --text-3: #8f8c86;  /* tertiary, ≥ 4.5:1 up to ink-3 */

  /* Ember: the single accent. Used for focus, active state and one signal per view. */
  --ember: #f5762a;
  --ember-hi: #ff9150;
  --ember-ink: #1c0e05;
  --ember-soft: rgb(245 118 42 / .12);
  --ember-line: rgb(245 118 42 / .38);

  --ok: #6fc69a;
  --warn: #e8b54c;
  --err: #f2685a;
  --err-soft: rgb(242 104 90 / .1);

  /* Type */
  --f-display: 'Archivo A4', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Instrument Sans A4', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono A4', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-17: 17px;
  --t-20: 20px; --t-24: 24px; --t-32: 32px; --t-44: 44px;
  --t-hero: clamp(48px, 8.4vw, 128px);
  --display-stretch: 112%;

  /* Space (4-based) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;

  /* Shape and depth */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;
  --edge: inset 0 1px 0 rgb(255 255 255 / .045);
  --shadow-1: var(--edge), 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: var(--edge), 0 2px 6px rgb(0 0 0 / .35), 0 12px 32px -14px rgb(0 0 0 / .7);
  --shadow-3: var(--edge), 0 4px 12px rgb(0 0 0 / .4), 0 32px 64px -24px rgb(0 0 0 / .85);
  --focus: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--ember);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.3, 1.4, .5, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 560ms; --d-5: 900ms;

  /* v0.1 aliases: keep the placeholder pages working on the new palette. */
  --a-bg: var(--ink-0);
  --a-surface: var(--ink-2);
  --a-surface-raised: var(--ink-3);
  --a-line: var(--line-2);
  --a-line-soft: var(--line-1);
  --a-text: var(--text-1);
  --a-muted: var(--text-2);
  --a-quiet: var(--text-3);
  --a-accent: var(--ember);
  --a-accent-text: var(--ember-ink);
  --a-warning: var(--warn);
  --a-font: var(--f-body);
  --a-mono: var(--f-mono);
  --a-max: var(--max);
}