/* Cardinal — design tokens.
 * Two themes: dark (default, "obsidian") and light ("temple").
 * All theme-switchable values namespaced under --obs-*.
 */

:root {
  /* --- Obsidian depth stack (dark default) --- */
  --obs-bg-0: #040506;     /* deepest void */
  --obs-bg-1: #07090c;     /* canvas */
  --obs-bg-2: #0b0e13;     /* chrome */
  --obs-bg-3: #10141b;     /* elevated */
  --obs-bg-4: #161c26;     /* hover */
  --obs-bg-5: #1e2632;     /* active */

  /* --- Ink / text --- */
  --obs-text-primary:   #f5f0e1;     /* ivory */
  --obs-text-secondary: #d9d1bb;
  --obs-text-tertiary:  #8c8678;
  --obs-text-disabled:  #555146;

  /* ---- Geometry layout invariants ----
   * `--ring-surround` is the ratio of rings-svg pixel size to the
   * canvas-content (= grid) pixel size. It works hand-in-hand with
   * rings.js's `FRAC.GRID`. The geometric invariant is
   *
   *   FRAC.GRID × --ring-surround = √2 / 2 ≈ 0.7071
   *
   * which keeps the grid's corners tangent to the wheel's inner ring.
   * The rings-svg is positioned at `top/left: -(surround-1)/2 × 100%`
   * so it's centred on the canvas-content. geometry.js reads this
   * same value (via getPropertyValue) so the JS fit() math stays in
   * sync.
   *
   * rings.js's FRAC.GRID and `--ring-surround` here MUST be tuned
   * together — change one without the other and the grid corners
   * will either bleed past the inner ring (surround too small) or
   * leave a gap (surround too big).
   *
   * Stage 5 (2026-05-18): tuned 2.05 → 1.8. Grid prominence goes
   * from ~49% → ~56% of viewport linear extent at fit-to-view.
   * rings.js FRAC.GRID retuned 0.345 → 0.393; all other FRACs
   * compressed ~33% to fit the smaller wheel band. */
  --ring-surround: 1.8;
  --ring-surround-offset: -40%;   /* = -(surround - 1) / 2 × 100% */

  /* --- Accents --- */
  --obs-accent:         #00f0ff;     /* cyan, primary */
  --obs-accent-soft:    rgba(0, 240, 255, 0.12);
  --obs-accent-glow:    rgba(0, 240, 255, 0.35);
  --obs-accent-warm:    #c79a52;     /* brass, secondary */
  --obs-accent-warm-soft: rgba(199, 154, 82, 0.16);

  /* --- Hairlines (brass-tinted at low opacity per reference) --- */
  --obs-hairline:        rgba(199, 154, 82, 0.18);
  --obs-hairline-strong: rgba(199, 154, 82, 0.36);
  --obs-hairline-cyan:   rgba(0, 240, 255, 0.22);
  --obs-hairline-white:  rgba(255, 255, 255, 0.06);

  /* --- Focus --- */
  --obs-focus-ring: #00f0ff;

  /* --- Backwards-compat aliases for the existing geometry view --- */
  --obs-bg-canvas:     var(--obs-bg-1);
  --obs-bg-chrome:     var(--obs-bg-2);
  --obs-bg-elevated:   var(--obs-bg-3);
  --obs-border-subtle: var(--obs-hairline);
  --obs-border-dashed: var(--obs-hairline-strong);

  /* --- Spacing scale --- */
  --obs-space-0: 0;
  --obs-space-1: 2px;
  --obs-space-2: 4px;
  --obs-space-3: 8px;
  --obs-space-4: 16px;
  --obs-space-5: 24px;
  --obs-space-6: 32px;
  --obs-space-7: 48px;

  /* --- Radii --- */
  --obs-radius-sm: 4px;
  --obs-radius-md: 8px;
  --obs-radius-lg: 12px;

  /* --- Typography --- */
  --obs-font-sans:  'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --obs-font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --obs-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --obs-font-size-xs:   11px;
  --obs-font-size-sm:   12px;
  --obs-font-size-base: 14px;
  --obs-font-size-lg:   16px;
  --obs-font-size-xl:   20px;
  --obs-font-size-2xl:  28px;
  --obs-font-size-3xl:  40px;

  --obs-font-weight-regular: 400;
  --obs-font-weight-medium:  500;
  --obs-font-weight-bold:    600;

  --obs-line-height-tight: 1.2;
  --obs-line-height-base:  1.5;

  /* --- Tracking (letter-spacing) --- */
  --obs-track-tight:    -0.02em;
  --obs-track-normal:    0;
  --obs-track-wide:      0.04em;
  --obs-track-wordmark:  0.22em;
  --obs-track-eyebrow:   0.28em;

  /* --- Easing --- */
  --obs-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --obs-dur:         180ms;

  /* --- Violet (depth cue + tertiary pin color) --- */
  --obs-violet:        #b894ff;
  --obs-violet-soft:   rgba(184, 148, 255, 0.05);
  --obs-violet-medium: rgba(184, 148, 255, 0.16);
  --obs-violet-glow:   rgba(184, 148, 255, 0.40);

  --obs-danger:        #d05959;
  --obs-danger-soft:   rgba(208, 89, 89, 0.12);

  --obs-emerald:       #5fc887;
  --obs-emerald-soft:  rgba(95, 200, 135, 0.12);
  --obs-emerald-glow:  rgba(95, 200, 135, 0.45);

  --obs-amber:         #f0a93f;
  --obs-amber-soft:    rgba(240, 169, 63, 0.14);
  --obs-amber-glow:    rgba(240, 169, 63, 0.55);

  /* Rose — pressure-points hard-aspect hue (conjunction / square / opp).
     Distinct from danger and from violet on the dark canvas. */
  --obs-rose:          #ef4d76;
  --obs-rose-soft:     rgba(239, 77, 118, 0.12);
  --obs-rose-glow:     rgba(239, 77, 118, 0.45);

  /* Slate — pressure-points minor-aspect hue. Neutral grey, intentionally
     low-contrast so minor aspects sit behind the more important hues. */
  --obs-slate:         #a0a8b8;
  --obs-slate-soft:    rgba(160, 168, 184, 0.10);
  --obs-slate-glow:    rgba(160, 168, 184, 0.35);

  /* --- Chrome dimensions --- */
  --obs-topbar-height:      56px;
  --obs-rail-width:         220px;
  --obs-statusstrip-height: 30px;
}

/* --- Light theme: "temple" — pharaonic ivory + dark brass --- */
html[data-theme="light"] {
  --obs-bg-0: #efe6cf;
  --obs-bg-1: #f7f1e3;
  --obs-bg-2: #f1ead6;
  --obs-bg-3: #ebe3cb;
  --obs-bg-4: #e3dabf;
  --obs-bg-5: #d9cfb0;

  --obs-text-primary:   #1a1509;
  --obs-text-secondary: #3c3320;
  --obs-text-tertiary:  #6b614c;
  --obs-text-disabled:  #8f8774;

  --obs-accent:         #0b5a66;
  --obs-accent-soft:    rgba(11, 90, 102, 0.12);
  --obs-accent-glow:    rgba(11, 90, 102, 0.28);
  --obs-accent-warm:    #7a5320;
  --obs-accent-warm-soft: rgba(122, 83, 32, 0.14);

  --obs-hairline:        rgba(122, 83, 32, 0.26);
  --obs-hairline-strong: rgba(122, 83, 32, 0.50);
  --obs-hairline-cyan:   rgba(11, 90, 102, 0.35);
  --obs-hairline-white:  rgba(0, 0, 0, 0.06);

  --obs-focus-ring: #0b5a66;
  --obs-violet:        #5a3fb0;
  --obs-violet-soft:   rgba(90, 63, 176, 0.04);
  --obs-violet-medium: rgba(90, 63, 176, 0.14);
  --obs-violet-glow:   rgba(90, 63, 176, 0.28);

  --obs-danger:        #b03e3e;
  --obs-danger-soft:   rgba(176, 62, 62, 0.10);

  --obs-emerald:       #1f7a4a;
  --obs-emerald-soft:  rgba(31, 122, 74, 0.10);
  --obs-emerald-glow:  rgba(31, 122, 74, 0.35);

  --obs-amber:         #c97a14;
  --obs-amber-soft:    rgba(201, 122, 20, 0.12);
  --obs-amber-glow:    rgba(201, 122, 20, 0.42);

  /* Rose / slate — deeper variants for the ivory canvas. */
  --obs-rose:          #b03e62;
  --obs-rose-soft:     rgba(176, 62, 98, 0.10);
  --obs-rose-glow:     rgba(176, 62, 98, 0.32);

  --obs-slate:         #6b7280;
  --obs-slate-soft:    rgba(107, 114, 128, 0.10);
  --obs-slate-glow:    rgba(107, 114, 128, 0.28);
}

/* --- Color-vision-deficiency (CVD) friendly palette ---
 *
 * When the user enables Accessibility → Color-blind mode, we apply
 * Okabe-Ito-palette overrides on top of whatever theme is active.
 * The most-confusable pair in our wheel is cyan-accent vs violet
 * (positive vs negative energy, ascending vs descending node, aspect
 * conjunction vs other aspects). Swapping violet for vermillion-orange
 * is universally distinguishable across protanopia / deuteranopia /
 * tritanopia. We keep cyan as-is — it stays distinct against vermillion
 * for all CVD types. Hardcoded aspect-web colours are remapped in
 * css/geometry.css under the same selector.
 */
html[data-cvd="on"] {
  --obs-violet:        #D55E00;   /* Okabe-Ito vermillion */
  --obs-violet-soft:   rgba(213, 94, 0, 0.10);
  --obs-violet-medium: rgba(213, 94, 0, 0.20);
  --obs-violet-glow:   rgba(213, 94, 0, 0.40);

  /* Rose → Okabe-Ito reddish-purple (CC79A7) — universally distinguishable
     from vermillion above. Used by pressure-points hard-aspect cells. */
  --obs-rose:          #CC79A7;
  --obs-rose-soft:     rgba(204, 121, 167, 0.12);
  --obs-rose-glow:     rgba(204, 121, 167, 0.40);

  /* Slate: grayscale is invariant under CVD; the dark-theme value works
     for all viewers, but we override anyway so a future palette swap on
     the base themes doesn't accidentally drift the CVD overlay. */
  --obs-slate:         #999999;
  --obs-slate-soft:    rgba(153, 153, 153, 0.10);
  --obs-slate-glow:    rgba(153, 153, 153, 0.35);
}