/* =========================================================================
   Emitron Design System — colors & type tokens
   --------------------------------------------------------------------------
   Palette is rooted in the wordmark banner: dense black, halftone yellow,
   warm white. The Müller-Brockmann overlay adds a single red accent — used
   sparingly, as he did, for emphasis and punctuation in otherwise restrained
   compositions.

   Type pairs a geometric grotesk (display) with a workhorse neo-grotesk
   (body) and a mono for technical specs. Substitutions noted inline.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Web fonts
   -------------------------------------------------------------------------
   Akzidenz-Grotesk (Müller-Brockmann's favourite) is a paid family. We use
   open substitutes here and flag them — please replace with licensed files.

     Display  : Neue Haas Grotesk Display Pro  →  fallback "Inter Tight"
     Body     : Akzidenz-Grotesk Pro           →  fallback "Inter"
     Mono     : Söhne Mono                     →  fallback "JetBrains Mono"

   We pull the fallbacks from Google Fonts so this stylesheet is drop-in.
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =========================================================================
   2. Base color tokens
   ========================================================================= */
:root {
  /* Core palette — the wordmark trio */
  --emitron-black:        #0A0A0A;   /* the field — true ink black */
  --emitron-yellow:       #F5C518;   /* the light — warm signal yellow */
  --emitron-white:        #F6F4EF;   /* warm paper white, not pure #fff */

  /* Neutral scale — based on warm grey, not pure cool */
  --neutral-0:            #FFFFFF;
  --neutral-50:           #F6F4EF;   /* same as --emitron-white */
  --neutral-100:          #ECE8DF;
  --neutral-200:          #D9D3C5;
  --neutral-300:          #BAB2A0;
  --neutral-400:          #8C8676;
  --neutral-500:          #5C5749;
  --neutral-600:          #3D3A30;
  --neutral-700:          #25241D;
  --neutral-800:          #15140F;
  --neutral-900:          #0A0A0A;   /* same as --emitron-black */

  /* Yellow scale — for highlights, halftone, hover states */
  --yellow-50:            #FFF8DC;
  --yellow-100:           #FCEEA0;
  --yellow-200:           #FADC5A;
  --yellow-300:           #F5C518;   /* primary yellow */
  --yellow-400:           #D9A500;
  --yellow-500:           #B58400;
  --yellow-600:           #8A6300;

  /* Müller-Brockmann red — single warm accent, used like punctuation */
  --signal-red:           #D1322B;
  --signal-red-dark:      #A62520;

  /* Status / semantic */
  --success:              #2F8F4A;
  --warning:              #D9A500;
  --danger:               #D1322B;
  --info:                 #1F5FBF;

  /* =======================================================================
     3. Semantic color roles (light theme — "paper")
     ======================================================================= */
  --bg:                   var(--emitron-white);
  --bg-elevated:          var(--neutral-0);
  --bg-sunken:            var(--neutral-100);
  --bg-inverse:           var(--emitron-black);

  --fg-1:                 var(--neutral-900);   /* primary text */
  --fg-2:                 var(--neutral-600);   /* secondary text */
  --fg-3:                 var(--neutral-400);   /* tertiary / captions */
  --fg-inverse:           var(--emitron-white);

  --border-subtle:        var(--neutral-200);
  --border-strong:        var(--neutral-900);

  --accent:               var(--signal-red);
  --highlight:            var(--yellow-300);

  --link:                 var(--neutral-900);
  --link-hover:           var(--signal-red);

  /* Focus ring — uses yellow not blue */
  --focus-ring:           0 0 0 3px var(--yellow-300);
}

/* Dark theme — "the field". Opt-in with [data-theme="dark"] */
[data-theme="dark"] {
  --bg:                   var(--emitron-black);
  --bg-elevated:          var(--neutral-800);
  --bg-sunken:            #000000;
  --bg-inverse:           var(--emitron-white);

  --fg-1:                 var(--emitron-white);
  --fg-2:                 var(--neutral-300);
  --fg-3:                 var(--neutral-400);
  --fg-inverse:           var(--emitron-black);

  --border-subtle:        var(--neutral-700);
  --border-strong:        var(--emitron-white);

  --link:                 var(--emitron-white);
  --link-hover:           var(--yellow-300);
}

/* =========================================================================
   4. Type — base tokens
   ========================================================================= */
:root {
  --font-display:   "Inter Tight", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:      "Inter", "Akzidenz-Grotesk Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:      "JetBrains Mono", "Söhne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, 1.25 minor third on a 16px base */
  --fs-12:          0.75rem;     /* 12 — captions, eyebrow */
  --fs-14:          0.875rem;    /* 14 — small body, table */
  --fs-16:          1rem;        /* 16 — body */
  --fs-18:          1.125rem;    /* 18 — large body / lead */
  --fs-22:          1.375rem;    /* 22 — h5 */
  --fs-28:          1.75rem;     /* 28 — h4 */
  --fs-36:          2.25rem;     /* 36 — h3 */
  --fs-48:          3rem;        /* 48 — h2 */
  --fs-64:          4rem;        /* 64 — h1 */
  --fs-96:          6rem;        /* 96 — display */
  --fs-144:         9rem;        /* 144 — hero / poster */

  /* Line-heights — Swiss style: tight on display, generous on body */
  --lh-tight:       1.0;  /* @kind font */
  --lh-snug:        1.1;  /* @kind font */
  --lh-normal:      1.4;  /* @kind font */
  --lh-relaxed:     1.6;  /* @kind font */

  /* Letter-spacing */
  --tracking-tight:   -0.02em;  /* @kind font */
  --tracking-normal:  0em;      /* @kind font */
  --tracking-wide:    0.08em;   /* @kind font */
  --tracking-caps:    0.12em;   /* small caps / eyebrows · @kind font */

  /* Weights */
  --fw-regular:    400;  /* @kind font */
  --fw-medium:     500;  /* @kind font */
  --fw-semibold:   600;  /* @kind font */
  --fw-bold:       700;  /* @kind font */
  --fw-black:      800;  /* @kind font */
}

/* =========================================================================
   5. Semantic type roles
   ========================================================================= */
.t-display,
[data-type="display"] {
  font-family: var(--font-display);
  font-size: var(--fs-144);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  margin: 0;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  margin: 0;
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.t-h4, h4 {
  font-family: var(--font-body);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.t-h5, h5 {
  font-family: var(--font-body);
  font-size: var(--fs-22);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  margin: 0;
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Eyebrow — small caps, tracked, used above section headlines */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-1);
}

.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
}

/* Wordmark style — the italicized "Emitron" */
.t-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  text-transform: none;
}

/* =========================================================================
   6. Spacing scale (4px base)
   ========================================================================= */
:root {
  --sp-0:    0;         /* @kind spacing */
  --sp-1:    0.25rem;   /*  4px */
  --sp-2:    0.5rem;    /*  8px */
  --sp-3:    0.75rem;   /* 12px */
  --sp-4:    1rem;      /* 16px */
  --sp-5:    1.5rem;    /* 24px */
  --sp-6:    2rem;      /* 32px */
  --sp-7:    3rem;      /* 48px */
  --sp-8:    4rem;      /* 64px */
  --sp-9:    6rem;      /* 96px */
  --sp-10:   8rem;      /* 128px */

  /* Grid — 12-column Müller-Brockmann grid */
  --grid-columns:    12;              /* @kind other */
  --grid-gutter:     var(--sp-5);     /* 24px */
  --grid-margin:     var(--sp-7);     /* 48px page margin */
  --grid-max:        1440px;

  /* Radii — sparing. Architecture is square. */
  --r-0:    0;         /* @kind radius */
  --r-1:    2px;       /* hairline rounding for chips */
  --r-2:    4px;       /* cards */
  --r-3:    8px;       /* large cards */
  --r-pill: 999px;     /* pills only */

  /* Borders */
  --bw-1:   1px;
  --bw-2:   2px;
  --bw-3:   4px;       /* used for the "rule line" Swiss-style */

  /* Elevation — used VERY sparingly. Swiss design is flat. */
  --shadow-sm:  0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-md:  0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-lg:  0 16px 40px rgba(10,10,10,0.12), 0 4px 12px rgba(10,10,10,0.06);
  --shadow-glow:0 0 0 1px var(--yellow-300), 0 0 24px rgba(245,197,24,0.35);

  /* Motion */
  --ease-standard:  cubic-bezier(0.2, 0.0, 0.2, 1);  /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);   /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    200ms;  /* @kind other */
  --dur-slow:    400ms;  /* @kind other */
}

/* =========================================================================
   7. Reset-ish + body defaults
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

::selection {
  background: var(--yellow-300);
  color: var(--emitron-black);
}