/* ==========================================================================
   Slipstream website — design tokens

   The single source of truth for the site's visual language. The names mirror
   `design-system/tokens.css` (the legacy prototype) and `app/lib/theme/
   tokens.dart` so the three agree; the values are lifted from the Claude
   Design source, which had no :root block and repeated every literal inline.

   Never hardcode a hex in site.css / article.css — add a token here.
   ========================================================================== */

:root {
  /* ---- Surfaces (dark, layered back-to-front) ---- */
  --bg:          #06070A;  /* page background                  */
  --band:        #080A0D;  /* trust bar, footer                */
  --surface:     #0E1014;  /* panels                           */
  --surface-2:   #14161A;  /* cards                            */
  --surface-3:   #1C1F24;  /* insets, tracks, inactive         */
  --surface-ed:  #0F1114;  /* editorial cards (Journal)        */
  --screen:      #0A0B0E;  /* device screen background         */
  --cover-base:  #0B0D10;  /* far end of every cover gradient  */

  /* ---- Hairlines ---- */
  --line:        rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.08);
  --line-nav:    rgba(255, 255, 255, 0.07);
  --line-btn:    rgba(255, 255, 255, 0.16);
  --line-faint:  rgba(255, 255, 255, 0.05);

  /* ---- Text ---- */
  --text:        #F4F5F7;  /* primary                          */
  --text-mark:   #F2F3F5;  /* logo mark fill                   */
  --text-bright: #EDEFF2;  /* pro plan ticks, pull quotes      */
  --text-2:      #C7CAD1;  /* free plan ticks                  */
  --text-dim:    #8A8F98;  /* secondary / nav links            */
  --text-prose:  #B7BCC4;  /* newsletter body copy             */
  --text-meta:   #9BA0A8;  /* editorial dek, card excerpts     */
  --text-mute:   #6B7079;  /* marquee wordmarks                */
  --text-faint:  #5A5F68;  /* labels, captions, footer heads   */
  --text-ghost:  #3A3E45;  /* Journal copyright line           */

  /* ---- Accent (teal) ---- */
  --accent:        #34E5E0;
  --accent-bright: #5AF0EC;
  --accent-hover:  #8CF5F1;  /* link hover, gradient stop      */
  --accent-pale:   #9FE9E6;  /* eyebrow inside hero pill       */
  --accent-deep:   #0E3B39;  /* feature icon tile              */
  --accent-ink:    #06302E;  /* glyphs sitting on accent fill  */
  --accent-a06:    rgba(52, 229, 224, 0.06);
  --accent-a16:    rgba(52, 229, 224, 0.16);
  --accent-a18:    rgba(52, 229, 224, 0.18);
  --accent-a22:    rgba(52, 229, 224, 0.22);
  --accent-a30:    rgba(52, 229, 224, 0.30);
  --accent-a32:    rgba(52, 229, 224, 0.32);
  --accent-a40:    rgba(52, 229, 224, 0.40);
  --accent-a45:    rgba(52, 229, 224, 0.45);
  --accent-a50:    rgba(52, 229, 224, 0.50);
  --accent-a60:    rgba(52, 229, 224, 0.60);
  --accent-a70:    rgba(52, 229, 224, 0.70);

  /* ---- Semantic ---- */
  --hr: #FF6B5A;  /* heart rate */

  /* ---- Power zone ramp (used by the in-app mockups) ---- */
  --z2: #153735;
  --z3: #1C5B58;
  --z4: #23807B;
  --z5: #34E5E0;
  --z6: #8CF5F1;

  /* ---- Type families ---- */
  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* ---- Layout ---- */
  --container:        1180px;
  --container-narrow: 820px;
  --gutter:           32px;
  --gutter-sm:        22px;
  --section-pad:      110px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}