/* =====================================================================
   TheTechFinn Design System — Tokens
   ===================================================================== */

/* --- Fonts (Google Fonts CDN) -------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLORS — from thetechfinn logo
     ========================================================= */

  /* Brand primaries */
  --finn-yellow:        #FFC010;
  --finn-yellow-hover:  #E6AC0E;
  --finn-yellow-press:  #CC990D;
  --finn-yellow-soft:   #FFF4D1;

  --finn-blue:          #30A0E0;
  --finn-blue-hover:    #2890CC;
  --finn-blue-press:    #2080B8;
  --finn-blue-soft:     #E0F2FC;

  --finn-red:           #F03030;
  --finn-red-hover:     #D82828;
  --finn-red-press:     #BF2020;
  --finn-red-soft:      #FDE0E0;

  /* Warm neutral ramp (off-black to off-white, hint of yellow) */
  --ink-0:    #0A0A08;
  --ink-100:  #1A1A17;
  --ink-200:  #2E2E2A;
  --ink-300:  #4A4A45;
  --ink-400:  #6B6B64;
  --ink-500:  #8E8E86;
  --ink-600:  #B5B5AD;
  --ink-700:  #D6D6CE;
  --ink-800:  #EAEAE2;
  --ink-900:  #F4F4EC;
  --ink-1000: #FAFAF7;
  --white:    #FFFFFF;

  /* Semantic (other) */
  --success:      #1F9D55;
  --success-soft: #D6F1E0;
  --warning:      #D97706;
  --warning-soft: #FEEBC8;

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --bg:          var(--ink-1000);
  --surface:     var(--white);
  --surface-2:   var(--ink-900);
  --fg:          var(--ink-0);
  --fg-muted:    var(--ink-300);
  --fg-subtle:   var(--ink-500);
  --border:      var(--ink-800);
  --border-strong: var(--ink-700);

  --link:          var(--finn-blue);
  --link-hover:    var(--finn-blue-hover);

  --primary:       var(--finn-yellow);
  --primary-fg:    var(--ink-0);              /* text on yellow */
  --primary-hover: var(--finn-yellow-hover);
  --primary-press: var(--finn-yellow-press);

  --danger:        var(--finn-red);
  --danger-fg:     var(--white);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--finn-blue);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Geist', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular, 1.25 ratio on the low end, 1.333 on the high end) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --space-0:   0;
  --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
     ========================================================= */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* =========================================================
     SHADOWS / ELEVATION
     ========================================================= */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10,10,10,0.04), 0 0 0 1px rgba(10,10,10,0.02);
  --elev-2: 0 4px 12px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
  --elev-3: 0 12px 32px rgba(10,10,10,0.08), 0 2px 6px rgba(10,10,10,0.04);
  --elev-4: 0 24px 64px rgba(10,10,10,0.12), 0 4px 12px rgba(10,10,10,0.06);

  /* =========================================================
     MOTION
     ========================================================= */
  --dur-fast:   100ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --ease:       cubic-bezier(0.2, 0, 0, 1);

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-max: 1280px;
  --container-narrow: 760px;
}

/* =====================================================================
   BASE / RESET-LITE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); }

/* =====================================================================
   SEMANTIC TYPE STYLES
   ===================================================================== */
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-5);
  color: var(--fg);
  text-wrap: balance;
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-4);
  color: var(--fg);
  text-wrap: balance;
}
.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  color: var(--fg);
}
.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  color: var(--fg);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}
p { margin: 0 0 var(--space-4); max-width: 65ch; text-wrap: pretty; }
.lede { font-size: var(--text-md); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.small { font-size: var(--text-sm); color: var(--fg-muted); }
code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

/* =====================================================================
   UTILITIES
   ===================================================================== */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-3); align-items: center; }

/* =====================================================================
   COMPONENT PRIMITIVES (minimal — UI kits override/extend)
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  cursor: pointer;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary { background: var(--finn-yellow); color: var(--ink-0); border-color: transparent; }
.btn-primary:hover  { background: var(--finn-yellow-hover); }
.btn-primary:active { background: var(--finn-yellow-press); }

.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

.btn-danger { background: var(--finn-red); color: var(--white); }
.btn-danger:hover { background: var(--finn-red-hover); }

.input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus-visible { outline: none; border-color: var(--finn-blue); box-shadow: 0 0 0 3px rgba(48,160,224,0.18); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-base) var(--ease);
}
.card.is-interactive:hover { box-shadow: var(--elev-2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: var(--ink-900);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.badge-yellow { background: var(--finn-yellow-soft); color: var(--finn-yellow-press); border-color: transparent; }
.badge-blue   { background: var(--finn-blue-soft);   color: var(--finn-blue-press);   border-color: transparent; }
.badge-red    { background: var(--finn-red-soft);    color: var(--finn-red-press);    border-color: transparent; }
.badge-green  { background: var(--success-soft);     color: var(--success);           border-color: transparent; }