/* ==========================================================================
   System-0 Design System · tokens.css · v3 "Biolume"
   Deep blue-black, one aqua accent, quiet glass. Photography leads.
   Three layers: primitive → semantic → component.
   Components and pages reference semantic/component tokens only.
   ========================================================================== */

/* === 1 · PRIMITIVES ====================================================== */
:root{
  /* Abyss — neutrals with a faint blue-teal cast */
  --color-abyss-1000:#03070a;
  --color-abyss-950:#060b0f;
  --color-abyss-900:#0a1217;
  --color-abyss-850:#0f191f;
  --color-abyss-800:#152128;
  --color-abyss-700:#1d2c34;
  --color-abyss-600:#2b3c45;
  --color-abyss-500:#4c5f69;
  --color-abyss-400:#8b9ca5;
  --color-abyss-300:#b6c4cb;
  --color-abyss-100:#e9f0f3;
  --color-white:#ffffff;

  /* Aqua — the single accent (blue-leaning, not mint) */
  --color-aqua-200:#c4eef6;
  --color-aqua-300:#93def0;
  --color-aqua-400:#5cc8e6;
  --color-aqua-500:#33a9cc;
  --color-aqua-700:#14576b;

  /* Coral — negative response only */
  --color-coral-400:#ff7a8a;

  /* Type families */
  --font-family-geist:"Geist","Inter",system-ui,sans-serif;
  --font-family-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --font-family-mono:"Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Type scale */
  --font-size-micro:.6875rem;
  --font-size-label:.75rem;
  --font-size-small:.875rem;
  --font-size-body:1.0625rem;
  --font-size-lead:clamp(1.1rem,1.6vw,1.3rem);
  --font-size-title:1.375rem;
  --font-size-title-lg:clamp(1.6rem,3.2vw,2.5rem);
  --font-size-headline:clamp(2.2rem,4.6vw,4rem);
  --font-size-section:clamp(2.1rem,5vw,4.2rem);
  --font-size-quote:clamp(1.9rem,3.4vw,3rem);
  --font-size-mega:clamp(3rem,9vw,7.4rem);
  --font-size-giga:clamp(5.5rem,18vw,16rem);

  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  --line-height-crush:.9;
  --line-height-tight:1;
  --line-height-snug:1.15;
  --line-height-body:1.6;

  --letter-spacing-crush:-.05em;
  --letter-spacing-tight:-.035em;
  --letter-spacing-mono:.02em;
  --letter-spacing-label:.12em;

  /* Spacing — 4px base */
  --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;  --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem;  --space-7:1.75rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem;   --space-14:3.5rem; --space-18:4.5rem;
  --space-24:6rem;

  /* Radius */
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* Effects */
  --blur-glass:16px;

  /* Motion */
  --duration-fast:150ms;
  --duration-base:240ms;
  --duration-slow:600ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* === 2 · SEMANTIC ======================================================== */
:root{
  color-scheme:dark;

  /* Surfaces */
  --color-bg:var(--color-abyss-950);
  --color-bg-deep:var(--color-abyss-1000);
  --color-surface:rgb(15 25 31 / .6);           /* glass */
  --color-surface-solid:var(--color-abyss-900);
  --color-surface-hover:rgb(21 33 40 / .8);

  /* Text */
  --color-fg:var(--color-abyss-100);
  --color-fg-muted:var(--color-abyss-400);
  --color-fg-faint:var(--color-abyss-500);

  /* Lines */
  --color-border:rgb(255 255 255 / .07);
  --color-border-strong:rgb(255 255 255 / .14);

  /* Brand + meaning — one accent, used sparingly */
  --color-accent:var(--color-aqua-400);
  --color-accent-text:var(--color-aqua-300);
  --color-accent-border:rgb(92 200 230 / .28);
  --color-accent-wash:rgb(92 200 230 / .07);
  --color-on-accent:var(--color-abyss-1000);
  --color-data:var(--color-aqua-200);
  --color-negative:var(--color-coral-400);
  --color-focus:var(--color-aqua-300);

  /* Atmosphere — a single soft glow, no multi-hue gradients */
  --gradient-aura:radial-gradient(55% 45% at 75% 25%,rgb(51 169 204 / .10),transparent 70%);
  --gradient-fade-b:linear-gradient(180deg,transparent 40%,var(--color-bg) 100%);

  /* Imagery treatment — neutral, slightly cool */
  --image-tint:rgb(20 87 107 / .25);
  --image-filter:saturate(.6) contrast(1.05);

  --font-display:var(--font-family-geist);
  --font-body:var(--font-family-geist);
  --font-quote:var(--font-family-serif);
  --font-mono:var(--font-family-mono);

  --layout-container:1240px;
  --layout-gutter-l:max(20px, env(safe-area-inset-left, 0px));
  --layout-gutter-r:max(20px, env(safe-area-inset-right, 0px));
  --space-section:clamp(40px,5.5vw,80px);
  --space-block:var(--space-14);
  --space-stack:var(--space-6);
}

/* === 3 · COMPONENTS ====================================================== */
:root{
  /* Button */
  --button-radius:var(--radius-pill);
  --button-pad-y:.875rem;
  --button-pad-x:var(--space-6);
  --button-font-weight:var(--font-weight-medium);
  --button-bg:var(--color-accent);
  --button-fg:var(--color-on-accent);
  --button-hover-bg:var(--color-aqua-300);
  --button-ghost-bg:transparent;
  --button-ghost-border:var(--color-border-strong);
  --button-ghost-hover-border:var(--color-fg-muted);

  /* Chip */
  --chip-bg:transparent;
  --chip-border:var(--color-border-strong);
  --chip-dot:var(--color-accent);

  /* Eyebrow */
  --eyebrow-color:var(--color-fg-muted);
  --eyebrow-index-color:var(--color-accent-text);

  /* Card (glass) */
  --card-bg:var(--color-surface);
  --card-hover-bg:var(--color-surface-hover);
  --card-border:var(--color-border);
  --card-radius:var(--radius-lg);
  --card-pad:var(--space-7);
  --card-blur:var(--blur-glass);

  /* Rules */
  --rule-color:var(--color-border);
  --rule-accent:var(--color-accent);

  /* Highlight */
  --highlight-wash:var(--color-accent-wash);
  --highlight-border:var(--color-accent-border);

  /* Media (photography) */
  --media-radius:var(--radius-lg);
  --media-border:var(--color-border-strong);
  --media-hud:rgb(255 255 255 / .5);
  --media-hud-accent:var(--color-accent-text);

  /* Backdrop grid (optional) */
  --grid-size:64px;
  --grid-line:rgb(255 255 255 / .025);
}