:root {
  /*
   * STYLE TOKEN CONTRACT (DETERMINISTIC)
   * 1) Do not add direct HEX/RGB/HSL values in component/page styles.
   * 2) Add new colors/sizing/motion only in this file as tokens.
   * 3) Components should consume semantic tokens (--color-*, --radius-*, --shadow-*).
   */

  /* Obsidian + Ice base palette */
  --bg-0: #070a0e;
  --bg-1: #0a0f16;
  --surface-1: #0f1620;
  --surface-2: #141d2a;
  --border-1: #1e2a3a;
  --divider-1: #243447;

  --text-1: #eaf2ff;
  --text-2: #b7c6da;
  --text-3: #7f93ad;
  --text-4: #5b6b80;

  --ice-accent: #6cbeed;
  --ice-glow: rgba(108, 190, 237, 0.24);
  --ice-border: rgba(108, 190, 237, 0.56);

  --status-pass: #2fe38c;
  --status-warn: #f2c94c;
  --status-fail: #ff5a6a;

  /* Semantic color aliases (component-facing) */
  --color-bg: var(--bg-0);
  --color-bg-elevated: var(--bg-1);
  --color-surface: var(--surface-1);
  --color-surface-elevated: var(--surface-2);
  --color-border: color-mix(in oklab, var(--border-1) 68%, transparent);
  --color-divider: color-mix(in oklab, var(--divider-1) 32%, transparent);

  --color-text: var(--text-1);
  --color-text-muted: var(--text-2);
  --color-text-subtle: var(--text-3);
  --color-text-disabled: var(--text-4);

  --color-accent: var(--ice-accent);
  --color-accent-glow: var(--ice-glow);
  --color-accent-border: var(--ice-border);

  --overlay-card-top: rgba(255, 255, 255, 0.07);
  --overlay-card-top-soft: rgba(255, 255, 255, 0.05);
  --overlay-card-bottom: rgba(0, 0, 0, 0.18);
  --overlay-button-bottom: rgba(0, 0, 0, 0.15);
  --overlay-button-primary-bottom: rgba(0, 0, 0, 0.12);

  --logo-card-top-edge: color-mix(in oklab, var(--color-text) 22%, transparent);
  --logo-caption-color: color-mix(in oklab, var(--color-text) 80%, var(--color-text-muted));
  --logo-caption-color-mobile: color-mix(in oklab, var(--color-text) 74%, var(--color-text-muted));

  --logo-frame-min-height: 520px;
  --logo-frame-min-height-mobile: 360px;
  --logo-frame-gap: 8px;
  --logo-frame-pad-block: 14px;
  --logo-frame-pad-inline: 22px;
  --logo-image-position: center 22%;

  /* Typography */
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-size-body: 16px;
  --text-size-small: 12px;
  --line-height-body: 1.62;

  /* Layout + motion */
  --radius-xs: 10px;
  --radius-tight: 12px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-section-y: 72px;
  --max-content-width: 1180px;

  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 18px 60px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 0 18px var(--color-accent-glow);

  --duration-fast: 160ms;
  --duration-base: 240ms;

  /* Backward compatibility aliases for existing site styles */
  --ab-ink: var(--color-bg-elevated);
  --ab-graphite: var(--color-surface);
  --ab-steel: var(--color-text-disabled);
  --ab-slate: var(--color-text-subtle);
  --ab-silver: var(--color-text-muted);
  --ab-cloud: var(--color-text-muted);
  --ab-offwhite: var(--color-text);

  --ab-blue: var(--color-accent);
  --ab-gold: var(--color-accent);
  --ab-bronze: var(--status-warn);

  --ab-radius: var(--radius-md);
  --ab-radius-lg: var(--radius-lg);
  --ab-border: 1px solid var(--color-border);
  --ab-shadow: var(--shadow-2);

  --ab-max: var(--max-content-width);
  --ab-font: var(--font-body);
  --ab-display: var(--font-display);
  --ab-mono: var(--font-mono);
}