/* ============================================================
   tokens.css — Light theme
   ============================================================ */

:root {
  /* ── Light palette ─────────────────────────────────────── */
  --bg0:  #EEF2EF;   /* page background — warm off-white */
  --bg1:  #FFFFFF;   /* panel / card surface */
  --bg2:  #E5EBE8;   /* elevated surface */
  --bg3:  #D2DAD6;   /* hover / divider */
  --bg4:  #BDC9C4;   /* active fill */

  /* ── Borders ───────────────────────────────────────────── */
  --border:  rgba(13, 30, 26, 0.07);
  --border2: rgba(13, 30, 26, 0.12);
  --border3: rgba(13, 30, 26, 0.22);

  /* ── Text ──────────────────────────────────────────────── */
  --text:  #0D1E1A;   /* near-black teal */
  --text2: #2A3F3A;   /* dark teal */
  --text3: #527070;   /* mid teal-gray */
  --text4: #7D9898;   /* light teal-gray */

  /* ── Primary: teal-green ───────────────────────────────── */
  --indigo:     #2BA07E;
  --indigo2:    #1F7A5D;
  --indigo3:    rgba(43, 160, 126, 0.08);
  --indigo-rgb: 43, 160, 126;

  /* ── Secondary accents ─────────────────────────────────── */
  --teal:     #2BA07E;
  --teal2:    #3DC298;
  --teal-rgb: 43, 160, 126;
  --amber:    #D4820E;
  --amber2:   #F0A020;
  --red:      #D94848;
  --red2:     #F07070;
  --red-rgb:  217, 72, 72;
  --green:    #2BA07E;
  --green2:   #3DC298;
  --purple:   #7C5CF6;
  --purple2:  #9A7BFA;

  /* ── Company brand colors ──────────────────────────────── */
  --google:    #4285F4;
  --meta:      #0866FF;
  --amazon:    #FF9900;
  --netflix:   #E50914;
  --microsoft: #00A4EF;
  --apple:     #555555;
  --uber:      #000000;

  /* ── Typography ────────────────────────────────────────── */
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Radii ──────────────────────────────────────────────── */
  --r-sm: 5px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 0.08s;
  --dur-fast:  0.10s;
  --dur:       0.22s;
  --dur-slow:  0.38s;

  /* ── Layout ─────────────────────────────────────────────── */
  --header-h:   60px;
  --sidebar-w:  252px;
  --rightbar-w: 320px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:     0 1px 2px rgba(13,30,26,0.05), 0 0 0 1px rgba(13,30,26,0.04);
  --shadow:        0 4px 16px rgba(13,30,26,0.08), 0 0 0 1px rgba(13,30,26,0.04);
  --shadow-md:     0 8px 32px rgba(13,30,26,0.11), 0 0 0 1px rgba(13,30,26,0.04);
  --shadow-lg:     0 20px 56px rgba(13,30,26,0.13), 0 0 0 1px rgba(13,30,26,0.04);
  --shadow-violet: 0 4px 20px rgba(43,160,126,0.22), 0 0 0 1px rgba(43,160,126,0.10);
  --shadow-teal:   0 4px 14px rgba(43,160,126,0.18);
}

/* ── Dark theme override ───────────────────────────────────── */
html[data-theme="dark"] {
  --bg0:  #0B1419;
  --bg1:  #111F28;
  --bg2:  #192C38;
  --bg3:  #223545;
  --bg4:  #2D4455;

  --border:  rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.10);
  --border3: rgba(255,255,255,0.20);

  --text:  #E2EDE8;
  --text2: #AFC5BD;
  --text3: #6FA090;
  --text4: #4A7878;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.7);
}