/* EVERLOOM design tokens for the Cowlsly main site (2026-10-11).

   Additive only: every name starts with --cw- so nothing already defined in
   styles.css (--gold, --emerald, --cyan, --panel …) changes value.

   Contrast figures below were computed with the WCAG relative-luminance formula
   against --cw-obsidian-900. They still need a browser contrast check before
   anyone treats them as verified.
     --cw-gold-500 on obsidian-900      ≈ 10.9:1
     --cw-ink-on-ivory on ivory-50      ≈ 16:1
     --cw-text-strong on obsidian-900   > 15:1

   Media queries cannot read custom properties, so the breakpoints listed at the
   end are reference values only. */
:root {
  /* Obsidian surfaces */
  --cw-obsidian-950: #030407;
  --cw-obsidian-900: #05070b;
  --cw-obsidian-800: #0b0f16;
  --cw-obsidian-700: #141a24;

  /* Emerald / jade crystal */
  --cw-emerald-deep: #0b3d2c;
  --cw-emerald-600: #1fa877;
  --cw-emerald-500: #3ff0b2;
  --cw-jade-300: #9af7d3;
  --cw-emerald-glow: rgba(63, 240, 178, 0.35);

  /* Luminous gold */
  --cw-gold-700: #8a6a1c;
  --cw-gold-500: #e8c06a;
  --cw-gold-300: #f6dfa4;
  --cw-gold-glow: rgba(242, 204, 123, 0.32);

  /* White marble / ivory reading surfaces */
  --cw-ivory-50: #f7f2e8;
  --cw-marble-200: #e6e0d4;
  --cw-marble-vein: rgba(122, 112, 94, 0.32);
  --cw-ink-on-ivory: #1a1712;

  /* Text on dark */
  --cw-text-strong: #eef7ff;
  --cw-text-muted: #a9b7c6;

  /* Type. No web font is loaded (the CSP only allows same-origin fonts), so the
     display stack falls back to local serif faces. Keep it to short headings. */
  --cw-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cw-font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --cw-text-sm: 0.875rem;
  --cw-text-base: 1rem;
  --cw-text-lg: 1.25rem;
  --cw-text-xl: 1.75rem;
  --cw-text-display: clamp(2rem, 6vw, 3.75rem);
  --cw-line-body: 1.6;

  /* Spacing (4px steps) */
  --cw-space-1: 0.25rem;
  --cw-space-2: 0.5rem;
  --cw-space-3: 0.75rem;
  --cw-space-4: 1rem;
  --cw-space-6: 1.5rem;
  --cw-space-8: 2rem;

  /* Radii and outlines */
  --cw-radius-sm: 0.6rem;
  --cw-radius-md: 1rem;
  --cw-radius-lg: 1.4rem;
  --cw-radius-pill: 999px;
  --cw-trim-gold: 1px solid rgba(232, 192, 106, 0.45);
  --cw-trim-emerald: 1px solid rgba(63, 240, 178, 0.4);

  /* Focus */
  --cw-focus-ring: 0 0 0 2px rgba(5, 7, 11, 0.92), 0 0 0 4px var(--cw-jade-300);

  /* Motion. Gear turn time is proportional to gear diameter, so two meshed
     gears keep the same rim speed and look mechanically coupled. */
  --cw-turn-lg: 90s;
  --cw-turn-md: 60s;
  --cw-turn-sm: 40s;
  --cw-gear-lg: 7.2rem;
  --cw-gear-md: 4.8rem;
  --cw-gear-sm: 3.2rem;
  --cw-dur-press: 160ms;
  --cw-dur-panel: 1000ms;
  --cw-ease-ui: cubic-bezier(0.22, 1, 0.36, 1);

  /* Breakpoints (reference only): phone ≤760px, tablet ≤1099px, desktop ≥1100px, wide ≥1440px */
  --cw-bp-phone: 760px;
  --cw-bp-tablet: 1099px;
  --cw-bp-wide: 1440px;
}