/*
  PyraTime design tokens: the blend (decided 2026-10-28).

  The Observatory shell (warm blacks, Geist, hairlines, the light canvas)
  with Obsidian Oracle's brass for the accent and drawings, a muted steel blue
  for levels and Sq9 marks, and JetBrains Mono for every number.

  This file is the source of truth for every PyraTime surface: Studio,
  pyratime.com, the Engine, the docs and the Sq9 app. It is plain CSS with
  no build step, so the other repos copy it verbatim; bump TOKENS_VERSION
  below when a value changes so a stale copy is easy to spot.

  Fonts are named by variable with a literal fallback: Studio sets
  --font-geist and --font-jetbrains-mono through next/font, a static page
  can load the same families by name.

  Contrast is checked in lib/tokens.test.ts: body text and the accent pass
  AA (4.5:1) on every surface in both themes.
*/

:root {
  --pt-tokens-version: "3";

  color-scheme: dark;

  /* Surfaces, darkest first. */
  --pt-bg:        #0A0A0B;
  --pt-surface:   #111113;
  --pt-surface-2: #18181B;
  --pt-line:      rgba(237, 234, 227, 0.09);
  --pt-line-2:    rgba(237, 234, 227, 0.16);
  /* --pt-line-2 laid on --pt-bg, opaque: a tag over an axis hides the tick under it. */
  --pt-tag:       #2E2D2B;

  /* Text. */
  --pt-text:       #EDEAE3;
  --pt-text-muted: #B4AFA6;
  --pt-text-faint: #A19C93;
  --pt-faint:      #5E5B55; /* decorative only — never text people must read */

  /* Brass: the one accent. Primary buttons, the projection, drawings. */
  --pt-accent:     #C79A52;
  --pt-accent-ink: #1A1204; /* text on a brass fill */
  --pt-accent-dim: #5A4626; /* brass at rest: inactive handles, fills under text */
  /* Steel blue: levels, Sq9 marks, the second series. Quiet beside the brass,
     so a chart full of levels doesn't glow. Never a button. */
  --pt-accent-2:   #8FA9B8;
  --pt-up:         #7FD4A8;
  --pt-down:       #F08A7A;

  /* The tier chip on locked tools and plans. Quiet: it informs, it doesn't sell. */
  --pt-chip-pro-bg:   rgba(199, 154, 82, 0.14);
  --pt-chip-pro-ink:  #C79A52;
  --pt-chip-pro-line: rgba(199, 154, 82, 0.35);

  --pt-focus: 0 0 0 2px var(--pt-bg), 0 0 0 4px var(--pt-accent);

  /* Type. Geist for words, JetBrains Mono for every number. */
  --pt-font-sans: var(--font-geist, "Geist"), ui-sans-serif, system-ui, sans-serif;
  --pt-font-mono: var(--font-jetbrains-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, monospace;

  --pt-text-2xs: 11px; /* the floor: nothing smaller */
  --pt-text-xs:  12px;
  --pt-text-sm:  13px;
  --pt-text-md:  14px;
  --pt-text-lg:  16px;
  --pt-text-xl:  20px;
  --pt-text-2xl: 28px;
  --pt-text-3xl: 40px;

  /* Space, on a 4px grid. */
  --pt-space-1:  4px;
  --pt-space-2:  8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 24px;
  --pt-space-6: 32px;
  --pt-space-7: 48px;

  --pt-radius-l:    14px;
  --pt-radius:      12px;
  --pt-radius-s:     8px;
  --pt-radius-xs:    4px;
  --pt-radius-pill: 999px;

  /* Only floating things cast a shadow: menus, dialogs, the drawing toolbar. */
  --pt-shadow-pop:    0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(237, 234, 227, 0.04) inset;
  --pt-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);

  --pt-appbar-h: 56px;
  --pt-rail-w:   44px;

  --pt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pt-dur-fast: 120ms;
  --pt-dur: 220ms;
}

/* The light canvas. Same names, so everything follows without edits. */
:root[data-theme="light"] {
  color-scheme: light;
  --pt-bg:        #F7F5F0;
  --pt-surface:   #FFFFFF;
  --pt-surface-2: #EFECE5;
  --pt-line:      rgba(26, 24, 20, 0.10);
  --pt-line-2:    rgba(26, 24, 20, 0.20);
  --pt-tag:       #D9D5CC;
  --pt-text:       #1A1814;
  --pt-text-muted: #4E4A43;
  --pt-text-faint: #6A655C;
  --pt-faint:      #A8A397;
  --pt-accent:     #8A6420;
  --pt-accent-ink: #FFFFFF;
  --pt-accent-dim: #DCC69E;
  --pt-accent-2:   #3E5A6B;
  --pt-up:         #177548;
  --pt-down:       #B23A2A;
  --pt-chip-pro-bg:   rgba(138, 100, 32, 0.10);
  --pt-chip-pro-ink:  #8A6420;
  --pt-chip-pro-line: rgba(138, 100, 32, 0.35);
  --pt-shadow-pop:    0 8px 24px rgba(26, 24, 20, 0.12), 0 1px 3px rgba(26, 24, 20, 0.08);
  --pt-shadow-dialog: 0 24px 64px rgba(26, 24, 20, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --pt-dur-fast: 0ms; --pt-dur: 0ms; }
}