/*
 * METIS BRAND — Design Tokens
 * Shared foundation for all themes. Import this before any theme file.
 *
 * Usage:
 *   @import url('shared/tokens.css');
 *   @import url('themes/feral/feral.css');   -- or professional.css
 */

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700&display=swap');

:root {
  /* Font stacks */
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Orbitron', var(--font-mono);

  /* Type scale (minor third — 1.2) */
  --text-xs:   0.694rem;   /* ~11px */
  --text-sm:   0.833rem;   /* ~13px */
  --text-base: 1rem;       /* 15px (html base) */
  --text-md:   1.2rem;     /* ~18px */
  --text-lg:   1.44rem;    /* ~22px */
  --text-xl:   1.728rem;   /* ~26px */
  --text-2xl:  2.074rem;   /* ~31px */
  --text-3xl:  2.488rem;   /* ~37px */
  --text-4xl:  3.583rem;   /* ~54px */
  --text-hero: 5rem;       /* 75px — METIS nameplate */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.7;
  --leading-loose:  2.0;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.25em;
  --tracking-widest:  0.3em;

  /* ═══════════════════════════════════════════════
     SPACING (4px base)
     ═══════════════════════════════════════════════ */

  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ═══════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════ */

  --max-width-content: 780px;
  --max-width-wide:    1200px;
  --max-width-full:    1440px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════ */

  --duration-fast:   0.1s;
  --duration-normal: 0.15s;
  --duration-slow:   0.3s;
  --ease-default:    ease;
  --ease-out:        ease-out;
  --ease-in-out:     ease-in-out;

  /* ═══════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════ */

  --z-base:    0;
  --z-above:   10;
  --z-modal:   100;
  --z-overlay: 1000;
  --z-fx:      9998;  /* scanlines, noise */
  --z-fx-top:  9999;
}

/* ═══════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; }

body {
  font-family: var(--font-body, var(--font-mono));
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }