/* ============================================================
   SENSITIVE SLEEPERS — Design Foundations
   "Clinical warmth": premium, therapeutic, nervous-system calm.
   Colors + Type tokens. Import this file anywhere you build.
   ============================================================ */

/* ---- Fonts ----------------------------------------------------
   Loaded from Google Fonts CDN. If you download the design system
   for offline / production use, drop the .woff2 files into fonts/
   and swap these @imports for @font-face rules.
   Substitution note: these are Google Fonts standing in for a
   licensed pairing. Spectral ≈ premium high-contrast serif,
   Hanken Grotesk ≈ warm humanist UI sans.
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PALETTE (raw scales) ---------- */

  /* Navy — the "midnight" base. Authority, depth, night. */
  --navy-950: #0B1626;
  --navy-900: #0E1B2E;
  --navy-800: #14233A;
  --navy-700: #1B2E49;
  --navy-600: #26405F;
  --navy-500: #335479;

  /* Crème / Paper — warm light grounds. Never pure white. */
  --cream-50:  #FBF8F1;
  --cream-100: #F6F1E6;
  --cream-200: #EEE6D5;
  --cream-300: #E3D8C2;

  /* Clinical Slate — calm, secondary, the "rested" mid-tone.
     Cooled toward a clinical blue for trust. */
  --slate-300: #A6B7C8;
  --slate-400: #7990A6;
  --slate-500: #56708A;
  --slate-600: #41566B;

  /* Eucalyptus — regulation, the parasympathetic cue.
     A muted blue-green (not a yellow sage) — medicinal calm. */
  --sage-200: #D2DDD2;
  --sage-300: #AFC4B4;
  --sage-400: #88A593;
  --sage-500: #6E8B79;
  --sage-600: #527060;

  /* Antique Brass — the SafeSignal accent. A muted, aged brass
     rather than a bright gold — premium, used sparingly. */
  --gold-200: #E8D6A8;
  --gold-300: #D6BE82;
  --gold-400: #C0A055;
  --gold-500: #AC8843;
  --gold-600: #856730;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:            var(--cream-50);   /* page ground */
  --surface:       #FFFFFF;           /* raised card on cream */
  --surface-sunken:var(--cream-100);  /* inset / muted panel */
  --surface-dark:  var(--navy-900);   /* dark sections, players */

  --ink:           var(--navy-800);   /* primary text on light */
  --ink-soft:      var(--slate-600);  /* secondary text */
  --ink-muted:     var(--slate-500);  /* tertiary / captions */
  --on-dark:       var(--cream-50);   /* primary text on navy */
  --on-dark-soft:  #B7C3D2;           /* secondary text on navy */

  --accent:        var(--gold-500);   /* primary accent / CTA gold */
  --accent-hover:  var(--gold-600);
  --accent-soft:   var(--gold-200);

  --calm:          var(--sage-500);   /* "regulation" green */
  --calm-soft:     var(--sage-200);

  --line:          var(--cream-300);  /* hairline borders on light */
  --line-dark:     rgba(255,255,255,0.10); /* borders on navy */

  --focus-ring:    color-mix(in oklch, var(--gold-500) 55%, transparent);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (fluid-ish, fixed px) ---------- */
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  --leading-tight:   1.1;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.16em;  /* eyebrow / overline caps */

  /* ---------- SPACING (8pt base, soft rhythm) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII (soft, never sharp; never pill on cards) ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (low, warm, diffuse — like lamplight) ---------- */
  --shadow-xs: 0 1px 2px rgba(20,35,58,0.06);
  --shadow-sm: 0 2px 8px rgba(20,35,58,0.06), 0 1px 2px rgba(20,35,58,0.04);
  --shadow-md: 0 8px 24px rgba(20,35,58,0.08), 0 2px 6px rgba(20,35,58,0.05);
  --shadow-lg: 0 20px 50px rgba(14,27,46,0.14), 0 6px 16px rgba(14,27,46,0.08);
  --shadow-glow: 0 0 0 1px rgba(184,146,60,0.30), 0 8px 30px rgba(184,146,60,0.18);

  /* ---------- MOTION (slow, eased, breathing — never bouncy) ---------- */
  --ease-calm: cubic-bezier(0.33, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-breath: 4200ms; /* ambient pulse for signal motifs */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these directly, or copy the property blocks.
   ============================================================ */

.ss-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ss-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.ss-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.ss-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.ss-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.ss-lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}

.ss-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.ss-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-muted);
}

.ss-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* Frequency label — the signature technical detail (e.g. "528 Hz") */
.ss-freq {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* global visible focus ring (Web Interface Guidelines: never outline:none without replacement) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-sm);
}
.ss-navlink:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}