/* Raenest design system tokens — adapted from the Reach leaderboard template
 * Theme: light warm-stone surface + National 2 + Raenest indigo
 * National 2 is self-hosted from site/assets/fonts (licensed brand font — do not
 * redistribute); Geist Mono is still pulled from Google Fonts for numerals.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');

@font-face { font-family: 'National 2'; src: url('../assets/fonts/National2Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'National 2'; src: url('../assets/fonts/National2RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'National 2'; src: url('../assets/fonts/National2Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'National 2'; src: url('../assets/fonts/National2MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'National 2'; src: url('../assets/fonts/National2Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'National 2'; src: url('../assets/fonts/National2BoldItalic.woff2') format('woff2');
  font-weight: 600 700; font-style: italic; font-display: swap; }

:root {
  /* === BACKGROUNDS === */
  --bg: #f7f6f3;             /* warm stone bg used across pages */
  --bg-alt: #fafaf9;         /* slightly lighter alt */
  --bg-white: #ffffff;       /* pure cards on top of stone */
  --bg-soft: #f3f1ec;        /* slightly darker section bg */
  --bg-dark: #1c1917;        /* dark sections (CTAs, footer) */
  --bg-darker: #0a0a0a;      /* deepest dark for primary buttons */

  /* === TEXT === */
  --text: #171412;
  --text-2: #57534e;
  --text-3: #79716b;
  --text-on-dark: #fdfdfc;
  --text-muted-on-dark: #d7d3d0;

  /* === BORDERS === */
  --border: #e7e5e4;
  --border-soft: #efeae3;
  --border-strong: #d6d3d1;
  --border-dark: #3a3633;

  /* === ACCENTS === */
  --accent: #4932dc;         /* Raenest indigo (from the logomark) */
  --accent-bg: rgba(73, 50, 220, 0.10);
  --accent-2: #c7bffa;       /* light lavender — the logomark's highlight */
  --accent-3: #2f1fa8;       /* deep indigo, for text on light */
  --hot: #f63d68;
  --alert: #e31b54;
  --info: #1570ef;
  --info-bg: rgba(21, 112, 239, 0.10);
  --purple: #6938ef;
  --purple-bg: rgba(105, 56, 239, 0.10);
  --amber: #f79009;
  --amber-bg: rgba(247, 144, 9, 0.10);
  --mint: #12b76a;
  --mint-bg: rgba(18, 183, 106, 0.10);
  --gray-tag: #79716b;
  --gray-bg: rgba(121, 113, 107, 0.10);

  /* === RADII === */
  --radius-xs: 2px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* === SPACING === */
  --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;

  /* === LAYOUT === */
  --max-w: 1280px;
  --max-w-content: 760px;
  --sidebar-w: 320px;

  /* === FONTS === */
  --font-body: 'National 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-serif: 'National 2', Georgia, serif;   /* display italics now use the brand face */

  /* === TYPE SCALE === */
  --text-h1: clamp(36px, 4.5vw, 56px);
  --text-h1-lh: 1.1;
  --text-h1-ls: -0.025em;

  --text-h2: clamp(26px, 2.8vw, 36px);
  --text-h2-lh: 1.2;
  --text-h2-ls: -0.02em;

  --text-h3: 22px;
  --text-h3-lh: 1.3;
  --text-h3-ls: -0.01em;

  --text-h4: 17px;
  --text-h4-lh: 1.4;
  --text-h4-ls: -0.005em;

  --text-body: 16px;
  --text-body-lh: 1.7;

  --text-small: 14px;
  --text-small-lh: 1.55;

  --text-xs: 12px;
  --text-xs-lh: 1.4;

  --text-mono-xs: 11px;
  --text-mono-sm: 13px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(23, 20, 18, 0.04);
  --shadow-md: 0 2px 8px rgba(23, 20, 18, 0.06);
  --shadow-lg: 0 12px 28px rgba(23, 20, 18, 0.08);
  --shadow-xl: 0 24px 48px rgba(23, 20, 18, 0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

h1 em, h2 em, .editorial-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-3);
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--accent-3); }

img { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }