/* ============================================================
   tokens.css — jainaditya.in design system
   Import this first in every page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { font-family: 'IBM Plex Mono', monospace; background: var(--bg); color: var(--fg); transition: background 0.4s, color 0.4s; }

/* ── LIGHT THEME (default) ── */
:root {
  /* Backgrounds */
  --bg:        #f2f1ed;
  --nav-bg:    rgba(242, 241, 237, 0.97);
  --scrim:     rgba(242, 241, 237, 0.88);
  --pbg:       rgba(242, 241, 237, 0.97);
  --cbg:       rgba(255, 255, 255, 0.88);
  --card-bg:   #ffffff;

  /* Foregrounds */
  --fg:        #1a1a1a;
  --fg2:       #444444;
  --fg3:       #666666;
  --fg4:       #999999;
  --fg5:       #bbbbbb;
  --fg6:       #dddddd;

  /* Borders */
  --rule:      rgba(26, 26, 26, 0.09);
  --cb:        rgba(180, 176, 168, 0.5);
  --card-bd:   rgba(26, 26, 26, 0.10);

  /* Accents */
  --green:     #00c07f;
  --amber:     #e8760a;
  --ab:        #006efc;   /* Apple blue */

  /* Hovers */
  --hover:     rgba(26, 26, 26, 0.03);

  /* Typography */
  --mono:      'IBM Plex Mono', monospace;
  --sans:      'IBM Plex Sans', sans-serif;

  /* Domain tag colours — light */
  --tag-ml-bg:    #E6F1FB;
  --tag-ml-fg:    #185FA5;
  --tag-pr-bg:    #FAEEDA;
  --tag-pr-fg:    #854F0B;
  --tag-sy-bg:    #EAF3DE;
  --tag-sy-fg:    #3B6D11;
  --tag-ap-bg:    #F1EFE8;
  --tag-ap-fg:    #5F5E5A;
  --tag-st-bg:    #F1EFE8;
  --tag-st-fg:    #888780;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg:        #07070c;
  --nav-bg:    rgba(7, 7, 12, 0.97);
  --scrim:     rgba(7, 7, 12, 0.86);
  --pbg:       rgba(7, 7, 12, 0.97);
  --cbg:       rgba(14, 14, 22, 0.92);
  --card-bg:   #0d0d18;

  /* Foregrounds */
  --fg:        #f0efe8;
  --fg2:       #c0bfb8;
  --fg3:       #8888a0;
  --fg4:       #555570;
  --fg5:       #303048;
  --fg6:       #1a1a28;

  /* Borders */
  --rule:      rgba(255, 255, 255, 0.07);
  --cb:        rgba(90, 130, 200, 0.18);
  --card-bd:   rgba(255, 255, 255, 0.07);

  /* Hovers */
  --hover:     rgba(255, 255, 255, 0.025);

  /* Domain tag colours — dark */
  --tag-ml-bg:    #042C53;
  --tag-ml-fg:    #85B7EB;
  --tag-pr-bg:    #412402;
  --tag-pr-fg:    #EF9F27;
  --tag-sy-bg:    #173404;
  --tag-sy-fg:    #97C459;
  --tag-ap-bg:    #2C2C2A;
  --tag-ap-fg:    #B4B2A9;
  --tag-st-bg:    #2C2C2A;
  --tag-st-fg:    #888780;
}

/* ── SHARED ANIMATIONS ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.12; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes hintfade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── SHARED UTILITIES ── */
.mono    { font-family: var(--mono); }
.sans    { font-family: var(--sans); }
.label   { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg4); }
.rule    { height: 1px; background: var(--rule); }

/* Domain tags */
.tag       { display: inline-block; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; font-family: var(--mono); }
.tag-ml    { background: var(--tag-ml-bg); color: var(--tag-ml-fg); }
.tag-proc  { background: var(--tag-pr-bg); color: var(--tag-pr-fg); }
.tag-sys   { background: var(--tag-sy-bg); color: var(--tag-sy-fg); }
.tag-apple { background: var(--tag-ap-bg); color: var(--tag-ap-fg); }
.tag-study { background: var(--tag-st-bg); color: var(--tag-st-fg); }

/* Status dot */
.sdot {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--green);
  animation: pulse 2.4s ease-in-out infinite;
  margin-right: 6px; vertical-align: middle;
}