/* =====================================================
   CLION Care — Design tokens (BRAND-ACCURATE)
   Palette: red #E92020 + neutrals from clioncare.com base.css
   Typography: Inter + JetBrains Mono (matches SF Pro/Inter stack)
   ===================================================== */
:root{
  /* "Dark" chapter — now warm stone/greige (no black anywhere) */
  --ink-900: #EFEBE3;        /* was near-black — now warm cream (page bg for "dark" sections) */
  --ink-800: #F5F1E9;        /* card / stage surface on dark sections */
  --ink-700: #E2DDD1;        /* borders & dividers */
  --ink-600: #C8C2B4;        /* stronger borders */

  /* On-warm-cream ink tones — the "dark" chapters are now light stone/cream */
  --on-dark-fg: #2A2622;      /* main text on the warm chapters */
  --on-dark-fg-mute: #6E665C; /* muted text on warm bg */
  --fg-warm: #2A2622;         /* alias for text-on-warm-cream */

  /* Light chapter — cooler paper white */
  --ivory-50:  #FBFAF7;
  --ivory-100: #F3F1EB;
  --ivory-200: #E5E1D6;
  --stone-500: #4B4740;
  --stone-400: #6E665C;
  --stone-300: #9C9689;

  /* Brand accents — CLION red family (from client base.css) */
  --brand-500: #E92020;      /* primary — replaces gold-500 */
  --brand-400: #FF3B3B;      /* light — highlights, hover glow */
  --brand-600: #C11818;      /* pressed, gradient bottom */
  --brand-700: #8F1010;      /* deep */
  --brand-soft: #FDECEC;     /* soft tint bg */
  --brand-glow: rgba(233, 32, 32, 0.35);
  --brand-glow-soft: rgba(233, 32, 32, 0.10);

  /* Legacy aliases so existing style.css keeps working */
  --gold-500: var(--brand-500);
  --gold-400: var(--brand-400);
  --gold-300: var(--brand-400);
  --gold-700: var(--brand-600);
  --gold-glow: var(--brand-glow);
  --gold-soft: var(--brand-glow-soft);

  /* Rare medical trust green */
  --jade-500: #16A34A;

  /* Typography — Inter is the client's font */
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale — same as before */
  --fs-d1: clamp(3rem, 7.5vw, 7rem);
  --fs-d2: clamp(2.25rem, 4.6vw, 4rem);
  --fs-d3: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.35rem, 2.6vw, 2rem);
  --fs-lg: 1.2rem;
  --fs-body: 1rem;
  --fs-mono: 0.75rem;

  /* Space */
  --pad-x: clamp(24px, 5vw, 72px);
  --chapter-pad: clamp(120px, 15vh, 200px);
  --content-max: 1440px;

  /* Radii — brand base uses generous rounding (16–24px), preserve that */
  --r-sharp: 6px;
  --r-pill: 999px;
  --r-media: 20px;

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* Hairline gradient border — red-tinted */
  --hairline: linear-gradient(90deg, transparent, rgba(233,32,32,0.35), transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  :root{ --ease-expo: ease; --ease-quart: ease; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
    scroll-behavior: auto !important;
  }
  .strand-canvas{opacity: 0.35 !important}
}