/* ============================================================
   tokens.css — md.academy OS
   text-mode desktop · dark · Claude Code clay/amber on warm black
   ============================================================ */

:root {
  /* ---- surfaces (warm near-black, never #000) ---- */
  --desktop:    #0A0908;   /* the OS wallpaper void */
  --win:        #14110D;   /* window body */
  --win-raised: #1A1611;   /* inset panels inside windows */
  --bar-idle:   #211C16;   /* inactive title bar */
  --menubar:    #0E0C0A;

  /* ---- hairlines / frame ---- */
  --hair:   #2A241D;
  --hair-2: #38302610;
  --line:   #463B2E;       /* window frame line */
  --shadow: rgba(0,0,0,0.55);

  /* ---- text ---- */
  --fg:      #ECE6DA;
  --fg-dim:  #B4AB9B;
  --muted:   #7C7264;
  --on-clay: #1A1108;      /* text on a clay-filled title bar */

  /* ---- Claude Code clay / amber accents ---- */
  --clay:      #D97757;    /* Anthropic clay — primary accent / active */
  --clay-rgb:  217, 119, 87;  /* clay channels for rgba(var(--clay-rgb), a) tints */
  --clay-deep: #C2603F;    /* active title bar fill */
  --clay-soft: #E0916F;
  --amber:     #E0A45E;    /* numbers, prices, highlights */
  --ember:     #B8502E;    /* close button / danger */
  --live:      #8FB87E;    /* the one green — live LED */

  /* ---- type ---- */
  --mono:    'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Handjet', 'JetBrains Mono', monospace;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* fluid display scale (Handjet headings) */
  --t-h1:  clamp(34px, 5vw, 60px);
  --t-h2:  clamp(26px, 3.4vw, 40px);
  --t-h3:  clamp(19px, 2vw, 24px);
  --t-body: 14px;
  --t-mono: 13px;
  --t-sm:   12px;
  --t-xs:   11px;
  --t-xxs:  10px;

  /* ---- metrics ---- */
  --menubar-h: 28px;
  --dock-h:    30px;
  --bar-h:     30px;       /* window title bar */
  --u: 8px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Windows-95 button bevel ---- */
  --btn-face: #2a2219;     /* raised button surface */
  --bevel-hl:  #6a5c4d;    /* light edge (top/left when raised) */
  --bevel-sh:  #060504;    /* dark edge (bottom/right when raised) */
  --bevel-ihl: #44392f;    /* inner highlight / hover face */
  --bevel-ish: #181410;    /* inner shadow */

  /* ---- paper sticky notes ---- */
  --paper-1: #ecdca6;      /* manila */
  --paper-2: #e7d3bf;      /* kraft */
  --paper-ink: #271d13;

  /* ---- body/lead text uses the simple sans (Inter) ---- */
  --w95: var(--sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--desktop);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;            /* the OS owns the viewport */
  overscroll-behavior: none;
}

body { font-variant-ligatures: none; }

::selection { background: rgba(var(--clay-rgb),0.30); color: var(--fg); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
h1,h2,h3,h4,p,ul,ol { margin: 0; padding: 0; }
ul,ol { list-style: none; }

/* shared atoms */
.mono  { font-family: var(--mono); }
.num   { color: var(--amber); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.kbd   { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
         border: 1px solid var(--hair); border-radius: 2px; padding: 1px 5px; }