/* ============================================================
   PEAKBIT DESIGN TOKENS
   Drop-in CSS custom properties for any peakbit project.

   Font files required (self-hosted, DSGVO-compliant):
     /fonts/LeagueSpartan-VF.woff2  (https://github.com/theleagueof/league-spartan/releases)
     /fonts/hack-regular.woff2      (https://github.com/source-foundry/Hack/releases)
   ============================================================ */

/* Self-hosted fonts */
@font-face {
  font-family: 'League Spartan';
  src: url('/fonts/LeagueSpartan-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hack';
  src: url('/fonts/hack-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand — primary ── */
  --color-navy:        #091B30;   /* dominant dark background */
  --color-cyan:        #37EEFF;   /* electric accent, hover state */
  --color-teal:        #00BDD6;   /* primary accent, CTAs, labels */

  /* ── Brand — secondary ── */
  --color-green:       #3BEB97;   /* success states */
  --color-sand:        #00B687;
  --color-blue:        #5774FC;
  --color-purple:      #4A3DC1;
  --color-orange:      #FFD800;   /* warning / stub states */
  --color-peach:       #FFDFA5;

  /* ── Neutrals ── */
  --color-bg-light:    #E9EEF0;
  --color-white:       #FFFFFF;
  --color-gray-400:    #94A3B8;
  --color-gray-600:    #4A5568;

  /* ── Semantic aliases ── */
  --color-text:        var(--color-navy);
  --color-text-muted:  var(--color-gray-600);
  --color-text-light:  var(--color-white);
  --color-accent:      var(--color-teal);
  --color-bg:          var(--color-bg-light);
  --color-surface:     var(--color-white);

  /* ── Typography ── */
  --font-heading:  'League Spartan', sans-serif;
  --font-body:     'League Spartan', sans-serif;
  --font-mono:     'Hack', 'Fira Code', monospace;

  /* ── Type scale — Major Third (×1.25) ── */
  --text-xs:    0.8rem;      /*  12.8px */
  --text-sm:    0.875rem;    /*  14px   */
  --text-base:  1rem;        /*  16px   */
  --text-lg:    1.125rem;    /*  18px   */
  --text-xl:    1.25rem;     /*  20px   */
  --text-2xl:   1.563rem;    /*  25px   */
  --text-3xl:   1.953rem;    /*  31px   */
  --text-4xl:   2.441rem;    /*  39px   */
  --text-5xl:   3.052rem;    /*  49px   */

  /* ── Spacing (4px base) ── */
  --space-1:  0.25rem;   /*  4px  */
  --space-2:  0.5rem;    /*  8px  */
  --space-3:  0.75rem;   /* 12px  */
  --space-4:  1rem;      /* 16px  */
  --space-6:  1.5rem;    /* 24px  */
  --space-8:  2rem;      /* 32px  */
  --space-12: 3rem;      /* 48px  */
  --space-16: 4rem;      /* 64px  */
  --space-20: 5rem;      /* 80px  */
  --space-24: 6rem;      /* 96px  */

  /* ── Layout ── */
  --max-width:     1200px;
  --header-height: 4.5rem;

  /* ── Border radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.441rem;
    --text-4xl: 1.953rem;
    --text-3xl: 1.563rem;
  }
}