/* =============================================================================
   ERTS Lab — Design Tokens
   Embedded Real-Time Systems Laboratory · TH Köln · Faculty 07
   -----------------------------------------------------------------------------
   The visual system is rooted in PCB manufacturing aesthetics: solder-mask
   green, copper/gold traces, silver components, deep black substrate, and
   off-white silkscreen markings. Type leans on technical mono/condensed sans
   that evokes silkscreen overlays printed onto a board.
   ============================================================================= */

/* ---------- Webfonts — self-hosted (DSGVO-clean, offline-ready) -------------
   Sources Silkscreen, Major Mono Display, Saira Condensed, JetBrains Mono and
   Inter from local woff2 files in assets/fonts/. All fonts are licensed under
   the SIL Open Font License (OFL) — see assets/fonts/LICENSE.md. */
@import url('assets/fonts/fonts.css');

:root {
  /* ===========================================================================
     COLORS — Core palette
     Black substrate, PCB green, copper/gold traces, silver, off-white silkscreen.
     =========================================================================== */

  /* Substrate (PCB base / dark surfaces) */
  --erts-black:           #0A0E0B;   /* near-black with green undertone, like cured solder mask */
  --erts-substrate:       #0F1411;   /* slightly raised black, app background */
  --erts-substrate-2:     #161C18;   /* card / panel surface */
  --erts-substrate-3:     #1F2722;   /* hover surface */
  --erts-substrate-line:  #2A332D;   /* hairline divider */

  /* PCB green — solder-mask family */
  --erts-pcb-900:         #061A0E;   /* deepest mask */
  --erts-pcb-800:         #0A2614;   /* mask shadow */
  --erts-pcb-700:         #0F4C2A;   /* PRIMARY pcb green — like a fresh fab board */
  --erts-pcb-600:         #156B3B;
  --erts-pcb-500:         #1E8A4D;   /* signal / live trace */
  --erts-pcb-400:         #3FB068;   /* power LED / scope trace */
  --erts-pcb-300:         #6DD08D;
  --erts-pcb-200:         #A8E5BD;
  --erts-pcb-100:         #DEF5E6;

  /* Copper / Gold — trace and pad metallization */
  --erts-gold-900:         #3D2A0A;
  --erts-gold-800:         #6B4912;
  --erts-gold-700:         #9A6E1E;
  --erts-gold-600:         #C8A24B;   /* PRIMARY gold — ENIG-finish pad */
  --erts-gold-500:         #D9B868;
  --erts-gold-400:         #E8CE8E;
  --erts-gold-300:         #F2E1B5;

  /* Silver — components, leads, metal */
  --erts-silver-900:       #2E332F;
  --erts-silver-800:       #4A524C;
  --erts-silver-700:       #6E776F;
  --erts-silver-600:       #8E9890;   /* component lead */
  --erts-silver-500:       #ADB6AE;
  --erts-silver-400:       #C8CFC9;
  --erts-silver-300:       #DDE2DE;
  --erts-silver-200:       #ECEFEC;

  /* Silkscreen — off-white markings printed onto the board */
  --erts-silk:             #F2F0E6;   /* PRIMARY silkscreen white */
  --erts-silk-warm:        #EDE7D2;   /* aged silkscreen */
  --erts-silk-dim:         #C9C7BD;

  /* Pure white for high-contrast surfaces */
  --erts-white:            #FFFFFF;

  /* Signal accents — used very sparingly. Inspired by status LEDs on a board. */
  --erts-signal-red:       #E0413B;   /* fault / power-rail red */
  --erts-signal-amber:     #E8A53A;   /* attention */
  --erts-signal-cyan:      #4FC3D9;   /* probe / data accent (also nods to alt logo) */

  /* ===========================================================================
     SEMANTIC TOKENS — Light surface (silkscreen-on-paper / docs / day mode)
     =========================================================================== */
  --bg:                    var(--erts-silk);
  --bg-elev:               #FFFFFF;
  --bg-sunken:             #E8E5D6;
  --bg-tint:               #F7F5EC;

  --fg:                    var(--erts-black);
  --fg-muted:              #4A524C;
  --fg-dim:                #6E776F;

  --line:                  #D6D2C2;
  --line-strong:           #A8A395;

  --brand:                 var(--erts-pcb-700);
  --brand-hover:           var(--erts-pcb-600);
  --brand-press:           var(--erts-pcb-800);
  --brand-fg:              var(--erts-silk);

  --accent:                var(--erts-gold-600);
  --accent-fg:             var(--erts-black);

  /* ===========================================================================
     SPACING — 4px base 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;
  --space-32:  128px;

  /* ===========================================================================
     RADII — Mostly sharp. PCB pads and silkscreen are crisp.
     Slight rounding only where necessary for soft UI affordance.
     =========================================================================== */
  --radius-0:   0;
  --radius-1:   2px;        /* buttons, fields */
  --radius-2:   4px;        /* small cards */
  --radius-3:   6px;        /* cards */
  --radius-pill: 999px;     /* status chips */

  /* ===========================================================================
     SHADOWS — Subtle, inspired by raised PCB components catching light.
     =========================================================================== */
  --shadow-1: 0 1px 0 rgba(10, 14, 11, 0.04), 0 1px 2px rgba(10, 14, 11, 0.06);
  --shadow-2: 0 2px 4px rgba(10, 14, 11, 0.08), 0 4px 12px rgba(10, 14, 11, 0.06);
  --shadow-3: 0 4px 8px rgba(10, 14, 11, 0.10), 0 12px 32px rgba(10, 14, 11, 0.10);
  --shadow-glow-pcb:   0 0 0 1px var(--erts-pcb-500), 0 0 20px rgba(63, 176, 104, 0.30);
  --shadow-glow-gold:  0 0 0 1px var(--erts-gold-600), 0 0 20px rgba(200, 162, 75, 0.30);

  /* ===========================================================================
     TYPOGRAPHY — Three families.
        - "Display / silkscreen" : Saira Condensed (technical sans, narrow,
          uppercase-ready — the closest free analogue to PCB silkscreen text).
        - "Body / UI"            : Inter (legible at small sizes; ground tone).
        - "Mono / data"          : JetBrains Mono (datasheets, code, addresses).
     =========================================================================== */
  /* Silkscreen — primary eyebrow / label voice. Pixel-bitmap silkscreen as printed on a PCB. */
  --font-silkscreen: 'Silkscreen', 'JetBrains Mono', ui-monospace, monospace;
  /* Major Mono — secondary display mono, used for the wordmark logo. */
  --font-majormono:  'Major Mono Display', 'JetBrains Mono', ui-monospace, monospace;
  /* Mono — secondary, for body / data / running text */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Display — used only for very large display headers where silkscreen would feel too monospaced */
  --font-display: 'Saira Condensed', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  /* Body — fallback only; prefer mono */
  --font-body:    'JetBrains Mono', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — modular, slightly tighter than default */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   84px;
  --text-6xl:   120px;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;   /* silkscreen labels — uppercase, spaced */
  --tracking-widest:   0.22em;   /* monogram labels */

  /* ===========================================================================
     ANIMATION
     =========================================================================== */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ===========================================================================
   DARK SURFACE — board-themed, this is the primary brand surface
   Apply with `data-theme="board"` on a wrapping element.
   =========================================================================== */
[data-theme="board"] {
  --bg:         var(--erts-pcb-900);
  --bg-elev:    var(--erts-pcb-800);
  --bg-sunken:  #03100A;
  --bg-tint:    #0B2316;

  --fg:         var(--erts-silk);
  --fg-muted:   var(--erts-silk-dim);
  --fg-dim:     var(--erts-silver-700);

  --line:        rgba(242, 240, 230, 0.10);
  --line-strong: rgba(242, 240, 230, 0.22);

  --brand:       var(--erts-gold-600);
  --brand-hover: var(--erts-gold-500);
  --brand-press: var(--erts-gold-700);
  --brand-fg:    var(--erts-black);

  --accent:      var(--erts-pcb-400);
  --accent-fg:   var(--erts-pcb-900);
}

/* Black/substrate variant (less green; for chrome/tooling UI) */
[data-theme="substrate"] {
  --bg:         var(--erts-substrate);
  --bg-elev:    var(--erts-substrate-2);
  --bg-sunken:  var(--erts-black);
  --bg-tint:    var(--erts-substrate-3);

  --fg:         var(--erts-silk);
  --fg-muted:   var(--erts-silver-500);
  --fg-dim:     var(--erts-silver-700);

  --line:        var(--erts-substrate-line);
  --line-strong: var(--erts-silver-800);

  --brand:       var(--erts-gold-600);
  --brand-hover: var(--erts-gold-500);
  --brand-press: var(--erts-gold-700);
  --brand-fg:    var(--erts-black);

  --accent:      var(--erts-pcb-500);
  --accent-fg:   var(--erts-silk);
}

/* ===========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   =========================================================================== */

/* Eyebrow / silkscreen label — the most distinctive ERTS type treatment.
   Set in 'Silkscreen' (Jason Kottke, OFL) — pixel-bitmap face that mimics
   board-printed silkscreen markings. Used for section labels, tags, status,
   board-marking style headers. */
.t-silkscreen,
.t-eyebrow {
  font-family: var(--font-silkscreen);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 11px;
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}

.t-silkscreen-lg {
  font-family: var(--font-silkscreen);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 14px;
  line-height: var(--leading-snug);
}

/* Display headers — condensed sans, big and confident */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-6xl);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}

/* Body */
p, .t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* Mono — datasheets, ids, addresses, code */
.t-mono,
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.t-mono-xs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

/* Designators — like "U1, R12, C4" found on PCBs. Mono, small caps style. */
.t-designator {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erts-gold-600);
}

/* ===========================================================================
   BASE RESET (opt-in via .erts-base on a wrapping element)
   =========================================================================== */
.erts-base {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.erts-base *,
.erts-base *::before,
.erts-base *::after {
  box-sizing: border-box;
}