/* Resko — design tokens (subset shipped with the public site)
   ========================================================================
   Hiresko / Resko — Colors & Type
   Single source of truth for design tokens. Import in every artifact.
   ========================================================================= */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist-VariableFont_wght.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono — self-hosted from the uploaded variable font. */
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-VariableFont_wght.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Color tokens ---------- */

:root {
  /* Brand absolutes */
  --ink:          #181818;
  --ink-2:        #222222;
  --ink-3:        #2a2a2a;
  --paper:        #f5f5f5;
  --paper-soft:   #eeeeee;
  --paper-2:      #e6e6e6;
  --voltage:      #e3ef4a;
  --voltage-hover:#ffffff;

  /* Dark-surface foregrounds (white at opacity) */
  --fg1-dark:     rgba(255,255,255,1);
  --fg2-dark:     rgba(255,255,255,0.70);
  --fg3-dark:     rgba(255,255,255,0.40);
  --fg4-dark:     rgba(255,255,255,0.30);
  --fg5-dark:     rgba(255,255,255,0.20);
  --hairline-dark: rgba(255,255,255,0.06);
  --hairline-dark-2: rgba(255,255,255,0.12);

  /* ---------------------------------------------------------------------
     Signal palette — SECONDARY state colors.
     Voltage yellow remains the only PRIMARY accent. These four are reserved
     for state semantics only: in-progress, destructive, success, warning.
     They share Voltage's saturated "instrument-panel" character — high
     chroma, no pastels, no tints invented outside this list.
     Sampled from the live Resko track-page mock (blue + red) and extended
     with a matched green and amber.

       blue   active · running · distributing · info
       red    destructive · error · stop · hangup
       green  success · complete · live · approved
       amber  warning · pending · needs-attention

     Each has -soft (12% tint, for backgrounds) and -line (45% tint, for
     borders). Use on either surface — the alpha keeps them readable.
     --------------------------------------------------------------------- */
  --signal-blue:        #4a82dc;
  --signal-blue-soft:   rgba(74,130,220,0.12);
  --signal-blue-line:   rgba(74,130,220,0.45);

  --signal-red:         #d95a4d;
  --signal-red-soft:    rgba(217,90,77,0.12);
  --signal-red-line:    rgba(217,90,77,0.45);

  --signal-green:       #7dcba0;
  --signal-green-soft:  rgba(125,203,160,0.14);
  --signal-green-line:  rgba(125,203,160,0.50);

  --signal-amber:       #e6a85f;
  --signal-amber-soft:  rgba(230,168,95,0.14);
  --signal-amber-line:  rgba(230,168,95,0.50);

  /* ---------------------------------------------------------------------
     Glass surface — for controls, overlays, transport bars, popovers.
     HARD-EDGE: glass keeps the system's 0-radius rule. The "glassy"
     feeling comes from translucency + blur + saturation + a 1px inset
     highlight on the top edge — never from rounded corners.

     Use `.glass` (default, ~6% white over blur) for inline chrome,
     `.glass-strong` (~12% over heavier blur) for sticky toolbars and
     transport bars that sit over busy backgrounds.
     --------------------------------------------------------------------- */
  --glass-bg:           rgba(255,255,255,0.05);
  --glass-bg-strong:    rgba(20,20,20,0.55);
  --glass-line:         rgba(255,255,255,0.10);
  --glass-line-strong:  rgba(255,255,255,0.14);
  --glass-highlight:    rgba(255,255,255,0.08);  /* inset top-edge sheen */
  --glass-blur:         blur(20px) saturate(140%);  /* @kind other */
  --glass-blur-strong:  blur(28px) saturate(160%);  /* @kind other */
  /* Light-surface variants */
  --glass-bg-light:           rgba(24,24,24,0.04);
  --glass-bg-strong-light:    rgba(245,245,245,0.55);
  --glass-line-light:         rgba(24,24,24,0.10);
  --glass-line-strong-light:  rgba(24,24,24,0.14);
  --glass-highlight-light:    rgba(255,255,255,0.55);

  /* Light-surface foregrounds (black at opacity) */
  --fg1-light:    rgba(24,24,24,1);
  --fg2-light:    rgba(24,24,24,0.55);
  --fg3-light:    rgba(24,24,24,0.35);
  --fg4-light:    rgba(24,24,24,0.20);
  --hairline-light: rgba(24,24,24,0.08);
  --hairline-light-2: rgba(24,24,24,0.16);

  /* Semantic aliases — default to DARK surface */
  --bg:           var(--ink);
  --bg-soft:      var(--ink-2);
  --fg1:          var(--fg1-dark);
  --fg2:          var(--fg2-dark);
  --fg3:          var(--fg3-dark);
  --fg4:          var(--fg4-dark);
  --fg5:          var(--fg5-dark);
  --hairline:     var(--hairline-dark);
  --hairline-2:   var(--hairline-dark-2);
  --accent:       var(--voltage);
  --accent-fg:    var(--ink);

  /* Type families */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Urbanist",      -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale */
  --fs-hero:      clamp(6rem, 10vw, 14rem);  /* @kind font */ /* 96–224px */
  --fs-display-1: clamp(3.5rem, 6vw, 5.5rem); /* @kind font */ /* 56–88px */
  --fs-display-2: clamp(2.5rem, 4vw, 4rem);   /* @kind font */ /* 40–64px */
  --fs-h1:        2.25rem;  /* 36 */
  --fs-h2:        1.75rem;  /* 28 */
  --fs-h3:        1.375rem; /* 22 */
  --fs-body-lg:   1.25rem;  /* 20 */
  --fs-body:      1rem;     /* 16 */
  --fs-body-sm:   0.875rem; /* 14 */
  --fs-caption:   0.75rem;  /* 12 */
  --fs-micro:     0.625rem; /* 10 */

  --lh-tight:     0.9;  /* @kind font */
  --lh-snug:      1.1;  /* @kind font */
  --lh-normal:    1.4;  /* @kind font */
  --lh-relaxed:   1.6;  /* @kind font */

  --tr-tight:    -0.02em;  /* @kind font */
  --tr-normal:    0;       /* @kind font */
  --tr-label:     0.15em;  /* @kind font */
  --tr-button:    0.20em;  /* @kind font */
  --tr-wordmark:  0.25em;  /* @kind font */
  --tr-eyebrow:   0.30em;  /* @kind font */

  /* Spacing — 8pt base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii — system is HARD-EDGE by default */
  --radius-0: 0;
  --radius-1: 2px;     /* dense inline chips ONLY */
  --radius-full: 9999px;

  /* Motion */
  --ease:        cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --dur-fast:    150ms;  /* @kind other */
  --dur-base:    250ms;  /* @kind other */
  --dur-slow:    400ms;  /* @kind other */
}

/* ---------- Surface switch ----------
   Apply `.surface-light` to a section or the root to flip semantic
   foregrounds + background. The accent stays voltage on both surfaces. */
.surface-light {
  --bg:         var(--paper);
  --bg-soft:    var(--paper-soft);
  --fg1:        var(--fg1-light);
  --fg2:        var(--fg2-light);
  --fg3:        var(--fg3-light);
  --fg4:        var(--fg4-light);
  --fg5:        var(--fg4-light);
  --hairline:   var(--hairline-light);
  --hairline-2: var(--hairline-light-2);
  --accent-fg:  var(--ink);
}

/* ---------- Semantic typography ---------- */

html, body { background: var(--bg); color: var(--fg1); }

.t-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.t-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-2);
  line-height: 1.0;
  letter-spacing: var(--tr-tight);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

/* Label — the system's most-used voice. ALL CAPS, Space Grotesk, tracked. */
.t-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg3);
}
.t-label-strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg1);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}
.t-micro {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg4);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}
.t-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tr-wordmark);
  text-transform: uppercase;
}

/* ---------- Primitive utilities used in preview cards & UI kits ---------- */

.btn-voltage {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--space-3);
  padding: 11px 28px;
  background: var(--voltage);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.btn-voltage:hover { background: var(--voltage-hover); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--space-3);
  padding: 11px 28px;
  background: transparent;
  color: var(--fg2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  border: 1px solid var(--hairline-2);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-ghost:hover { color: var(--fg1); border-color: var(--fg3); }

.hairline { border: 0; border-top: 1px solid var(--hairline); height: 0; }

/* ---------- Glass surface utilities ---------- */
/* Hard-edge by default; never apply border-radius on these. */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  border-radius: 0;
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-line-strong);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  border-radius: 0;
}
.surface-light .glass {
  background: var(--glass-bg-light);
  border-color: var(--glass-line-light);
  box-shadow: inset 0 1px 0 var(--glass-highlight-light);
}
.surface-light .glass-strong {
  background: var(--glass-bg-strong-light);
  border-color: var(--glass-line-strong-light);
  box-shadow: inset 0 1px 0 var(--glass-highlight-light);
}

/* ---------- Archived / inactive state — diagonal hatch ---------- */
/* Apply to cards, buttons, table rows, etc. to mark inactive/retired state.
   135° lines, 1px wide, 7px gap, 3.5% white. Almost invisible on #181818. */
.is-archived {
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 7px);
}
/* Light-surface variant (when archived state sits on white/paper). */
.is-archived-light {
  background-image: repeating-linear-gradient(135deg,
    rgba(24, 24, 24, 0.04) 0 1px,
    transparent 1px 7px);
}