/* =========================================================
   tokens.css - SINGLE SOURCE OF TRUTH FOR THE DESIGN SYSTEM
   korsakov.me - palette, fonts, motion
   ---------------------------------------------------------
   HOW TO LINK:
   this file goes FIRST, before a project's own stylesheet.
       <link rel="stylesheet" href="tokens.css">     (root)
       <link rel="stylesheet" href="../tokens.css">  (subfolder)
       <link rel="stylesheet" href="styles.css">     (project styles - after)

   A project's own :root, declared afterwards, overrides these
   values via the cascade. So this file can be linked into any
   existing project without changing its appearance.

   Domain tokens (statuses, trends, etc.) do NOT live here -
   they stay in each project's own stylesheet:
       VPN      ->  --ok / --off
       Tracker  ->  --up / --down / --flat
   ========================================================= */

:root {
  /* ---- Backgrounds ---- */
  --bg-deep:   #060c1a;
  --bg-base:   #0a1628;
  --bg-elev:   #0f1d34;
  --bg-card:   #142540;
  --bg-mid:    #0a1628;
  --bg-soft:   #0f1d34;

  /* ---- Lines / borders ---- */
  --line:        rgba(168, 179, 199, 0.10);
  --line-strong: rgba(168, 179, 199, 0.22);
  --line-brass:  rgba(212, 165, 116, 0.25);

  /* ---- Accents ---- */
  --accent:      #d4a574;
  --accent-warm: #e8b56b;
  --accent-glow: #f0c896;
  --accent-deep: #a87c4f;
  --cool:        #4a7ab8;
  --cool-light:  #6b9bd8;

  /* ---- Text ---- */
  --text:       #f5f5f7;
  --text-mute:  #a8b3c7;
  --text-dim:   #6b7891;
  --text-faint: #4a5870;

  /* ---- Radius ---- */
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- Fonts ---- */
  --display: 'Fraunces', Georgia, serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Motion ---- */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}