/* ============================================================
   Samuel Snopko — Colors & Type
   ------------------------------------------------------------
   Source of truth for the personal brand. Pulled from the live
   portfolio (samuells.github.io), warmed up with terracotta /
   amber / cream tones so the palette feels honest, bold, direct
   — but still inviting.
   ============================================================ */

/* ---------- Web fonts ---------------------------------------- */
/* Saira Semi Condensed — local brand fonts (9 weights, .ttf) */
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/SairaSemiCondensed-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/SairaSemiCondensed-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/SairaSemiCondensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/SairaSemiCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/SairaSemiCondensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/SairaSemiCondensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/SairaSemiCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/SairaSemiCondensed-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/SairaSemiCondensed-Black.ttf') format('truetype'); }

/* JetBrains Mono + Source Serif 4 (body) — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     COLOR — palette
     ============================================================ */

  /* Primary — firebrick 11‑step scale (WCAG AA‑tested) */
  --color-firebrick-50:   #FCEFED;
  --color-firebrick-100:  #F8D8D4;
  --color-firebrick-200:  #F1B1AB;  /* alias: soft */
  --color-firebrick-300:  #E58379;
  --color-firebrick-400:  #D65448;
  --color-firebrick-500:  #C32B27;  /* alias: hover */
  --color-firebrick-600:  #B22222;  /* ★ PRIMARY — brand */
  --color-firebrick-700:  #88170B;  /* alias: deep — borders / link hl */
  --color-firebrick-800:  #7A1208;  /* alias: press */
  --color-firebrick-900:  #5C0E06;
  --color-firebrick-950:  #3D0904;

  /* Named aliases (back‑compat) */
  --color-firebrick:        var(--color-firebrick-600);
  --color-firebrick-deep:   var(--color-firebrick-700);
  --color-firebrick-hover:  var(--color-firebrick-500);
  --color-firebrick-press:  var(--color-firebrick-800);
  --color-firebrick-soft:   var(--color-firebrick-200);

  /* Cream / blush — text on red, surfaces */
  --color-cream-50:         #FBF5F0;  /* page bg, warm white */
  --color-cream-100:        #F6ECEB;  /* heading-on-red, soft surface */
  --color-cream-200:        #EDD6D4;  /* body-on-red, divider on cream */
  --color-cream-300:        #DEBDBA;

  /* Warm neutrals — text on cream, chrome */
  --color-ink-900:          #1A1010;  /* darkest, headings on cream */
  --color-ink-700:          #2B1D1C;  /* body text on cream */
  --color-ink-500:          #5C4744;  /* secondary text */
  --color-ink-300:          #8C7674;  /* tertiary / meta */
  --color-ink-100:          #C4B4B2;  /* disabled, hairline */

  /* Warm accents — used sparingly */
  --color-amber:            #E8A33D;  /* highlight, callout, warning */
  --color-amber-soft:       #F7E2BC;
  --color-terracotta:       #C76A4A;  /* secondary warm */
  --color-moss:             #6B8E4E;  /* "positive" / success */
  --color-moss-hover:       #7CA45A;
  --color-moss-press:       #557542;
  --color-clay:             #8A4B3A;  /* deep warm */

  /* Semantic */
  --color-bg:               var(--color-cream-50);
  --color-bg-elevated:      #FFFFFF;
  --color-bg-inverse:       var(--color-firebrick);
  --color-fg:               var(--color-ink-900);
  --color-fg-muted:         var(--color-ink-500);
  --color-fg-subtle:        var(--color-ink-300);
  --color-fg-inverse:       var(--color-cream-100);
  --color-fg-inverse-muted: var(--color-cream-200);
  --color-border:           var(--color-ink-100);
  --color-border-strong:    var(--color-ink-700);
  --color-link:             var(--color-firebrick);
  --color-link-hover:       var(--color-firebrick-deep);
  --color-accent:           var(--color-amber);
  --color-success:          var(--color-moss);
  --color-warning:          var(--color-amber);
  --color-danger:           var(--color-firebrick);

  /* ============================================================
     TYPE — families
     ============================================================ */

  --font-display: 'Saira Semi Condensed', system-ui, sans-serif;
  --font-sans:    'Saira Semi Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Scale — modular, 1.25 ratio, anchored at 16px */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   52px;
  --text-5xl:   72px;
  --text-6xl:   104px; /* hero, only when warranted */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* Weights — full local family (100 → 900) */
  --weight-thin:     100;
  --weight-extralight: 200;
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;

  /* ============================================================
     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 — soft, with one signature asymmetric blob
     ============================================================ */

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  /* Signature: portrait/avatar "blob" — single-rounded corner + 3 organic */
  --radius-blob: 10px 50% 50% 50%;

  /* ============================================================
     SHADOWS — warm-tinted, not neutral
     ============================================================ */

  --shadow-xs: 0 1px 2px rgba(26, 16, 16, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 16, 16, 0.08);
  --shadow-md: 0 6px 18px rgba(26, 16, 16, 0.10);
  --shadow-lg: 0 18px 36px rgba(26, 16, 16, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(26, 16, 16, 0.08);
  /* The portfolio's signature: a deep-red link "highlighter" — see .link-hl */

  /* ============================================================
     BORDERS — chunky frame is signature
     ============================================================ */

  --border-hairline: 1px solid var(--color-border);
  --border-strong:   2px solid var(--color-ink-900);
  --border-portrait:  4px solid var(--color-firebrick-deep);

  /* ============================================================
     MOTION — slow, deliberate, ease-out
     ============================================================ */

  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snopko:  cubic-bezier(0.08, 0.46, 0.90, 0.52); /* used on intro logo */

  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   500ms;
  --dur-intro:  1500ms;

  /* ============================================================
     LAYOUT
     ============================================================ */

  --content-width: 80ch;
  --readable-width: 65ch;
  --container-pad: clamp(16px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes
   ============================================================ */

.h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}.h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.p, p, .body {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  letter-spacing: -0.01em;
}

.lead {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  letter-spacing: -0.015em;
  color: var(--color-fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-firebrick);
}

.meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-subtle);
}

.code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-cream-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--color-firebrick-deep);
}

/* ============================================================
   SIGNATURE: link with hand-drawn highlight (see live site)
   ============================================================ */

.link, a.link {
  display: inline-block;
  position: relative;
  color: inherit;
  text-decoration: none;
  font-weight: var(--weight-bold);
}
.link > span { position: relative; z-index: 1; }
.link::before {
  content: "";
  position: absolute;
  bottom: -5%;
  right: -1%;
  width: 90%;
  height: 50%;
  background-color: var(--color-firebrick-deep);
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
  z-index: 0;
}
.link:hover::before { width: 95%; height: 70%; }

/* On cream backgrounds, the highlight uses primary instead of deep */
.on-cream .link::before { background-color: var(--color-firebrick); opacity: 0.18; }
.on-cream .link:hover::before { opacity: 0.32; }