/* ============================================================
   Extra Nerds — Design Tokens
   Source: https://branding.extranerds.com/
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --color-primary:        #2a8f96;  /* Teal — main actions, links */
  --color-primary-dark:   #237980;  /* Hover for primary */
  --color-primary-light:  #e8f2f3;  /* Tinted bg for primary surfaces */

  --color-accent:         #c9493a;  /* Rust red — highlights, CTAs, danger */
  --color-accent-dark:    #b13d2e;  /* Hover for accent */
  --color-accent-light:   #f8e8e5;  /* Tinted bg for accent surfaces */

  --color-dark:           #1e2f31;  /* Deep slate — text, headers */
  --color-light:          #f7f9f9;  /* Off-white — page background */
  --color-white:          #ffffff;  /* Cards, containers */

  /* ---------- Neutral / Text scale ---------- */
  --color-gray-900:       #1e2f31;  /* = dark */
  --color-gray-700:       #3d4f52;
  --color-gray-500:       #666666;  /* muted body / meta */
  --color-gray-300:       #b8c0c2;
  --color-gray-200:       #e0e0e0;  /* borders, dividers */
  --color-gray-100:       #f0f3f3;
  --color-gray-50:        #f7f9f9;  /* = light */

  /* ---------- Semantic Foreground ---------- */
  --fg-1: var(--color-gray-900);    /* primary text */
  --fg-2: var(--color-gray-700);    /* secondary text */
  --fg-3: var(--color-gray-500);    /* muted / meta */
  --fg-inverse: var(--color-white);
  --fg-link: var(--color-primary);
  --fg-link-hover: var(--color-primary-dark);
  --fg-accent: var(--color-accent);

  /* ---------- Semantic Background ---------- */
  --bg-page: var(--color-light);
  --bg-surface: var(--color-white);
  --bg-sunken: var(--color-gray-100);
  --bg-inverse: var(--color-dark);
  --bg-primary-soft: var(--color-primary-light);
  --bg-accent-soft: var(--color-accent-light);

  /* ---------- Borders ---------- */
  --border-subtle: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-focus:  var(--color-primary);

  /* ---------- Status ---------- */
  --status-success: #2d8a4e;
  --status-warning: #d9a441;
  --status-error:   var(--color-accent);
  --status-info:    var(--color-primary);

  /* ---------- Typography ---------- */
  --font-heading: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type scale (body-relative) */
  --fs-display:  3rem;       /* 48px — hero */
  --fs-h1:       2.5rem;     /* 40px */
  --fs-h2:       2rem;       /* 32px */
  --fs-h3:       1.5rem;     /* 24px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-body:     1rem;       /* 16px */
  --fs-small:    0.875rem;   /* 14px */
  --fs-micro:    0.75rem;    /* 12px — labels, eyebrows */

  --lh-tight:    1.2;
  --lh-snug:     1.4;
  --lh-normal:   1.6;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing (8px base) ---------- */
  --space-0:  0;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  80px;
  --space-9:  96px;

  /* ---------- Border Radius ---------- */
  --radius-sm: 4px;   /* small elements, tags */
  --radius-md: 6px;   /* buttons, inputs */
  --radius-lg: 8px;   /* cards, panels */
  --radius-pill: 999px;

  /* ---------- Shadows / Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 10px 24px rgba(0, 0, 0, 0.18);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 720px;
}

/* ============================================================
   Base semantic element styles
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  font-weight: var(--fw-semibold);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p  { margin: 0 0 var(--space-2); color: var(--fg-1); }
small { font-size: var(--fs-small); color: var(--fg-3); }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-4) 0;
}

::selection {
  background: var(--color-primary);
  color: var(--color-white);
}