/* ================================================================
   TOKENS.CSS — Design Tokens for Monochrome Brutalist System
   ================================================================ */

/* ── @FONT-FACE DECLARATIONS ── */

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/SpaceMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/SpaceMono-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-Bold.woff2') format('woff2');
}

/* ── CSS CUSTOM PROPERTIES ── */

:root {
  /* ── BACKGROUNDS ── */
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F5F5F5;
  --bg-tertiary:   #E8E8E8;
  --bg-inverse:    #000000;
  --bg-highlight:  #D4D4D4;

  /* ── TEXT ── */
  --text-primary:   #000000;
  --text-secondary: #555555;
  --text-tertiary:  #888888;
  --text-inverse:   #FFFFFF;
  --text-ghost:     #BBBBBB;

  /* ── BORDERS ── */
  --border-hard:    #000000;
  --border-medium:  #555555;
  --border-soft:    #D4D4D4;
  --border-ghost:   #E8E8E8;

  /* ── SEMANTIC STATUS ── */
  --status-critical:  #FF0000;
  --status-warning:   #FFB800;
  --status-positive:  #00CC66;
  --status-info:      #0088FF;
  --status-neutral:   #888888;

  /* ── SHADOWS ── */
  --shadow-sm:  2px 2px 0 var(--border-hard);
  --shadow-md:  4px 4px 0 var(--border-hard);
  --shadow-lg:  6px 6px 0 var(--border-hard);

  /* ── SPACING SCALE (4px grid) ── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── BORDER WIDTHS ── */
  --border-thin:     1px;
  --border-medium-w: 2px;
  --border-thick:    3px;
  --border-heavy:    4px;

  /* ── Z-INDEX SCALE ── */
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ── FONT FAMILIES ── */
  --font-display:  'Space Mono', 'IBM Plex Mono', monospace;
  --font-body:     'Space Mono', 'IBM Plex Mono', monospace;
  --font-data:     'IBM Plex Mono', 'Courier New', monospace;

  /* ── FONT SIZES (perfect fourth ~1.333) ── */
  --text-xs:    0.694rem;
  --text-sm:    0.833rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.333rem;
  --text-xl:    1.777rem;
  --text-2xl:   2.369rem;
  --text-3xl:   3.157rem;
  --text-4xl:   4.209rem;

  /* ── LINE HEIGHTS ── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── LETTER SPACING ── */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.2em;

  /* ── FONT WEIGHTS ── */
  --weight-normal:  400;
  --weight-bold:    700;
}