/* Extella — Webfont: DM Sans (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
/* Extella — Color tokens */
:root {
  /* ── Gold / accent ───────────────────────────── */
  --gold: #C57E33;          /* primary accent — warm bronze-gold */
  --gold-light: #d4984f;    /* hover variant */

  /* ── Surfaces (warm off-white system) ─────────── */
  --paper: #FAFAF8;         /* page background */
  --cream: #F5F3EE;         /* card / section background */
  --cream-dark: #EBE8E1;    /* terminal / code blocks */
  --white: #FFFFFF;         /* card hover */

  /* ── Ink (text) ──────────────────────────────── */
  --ink: #0A0A0A;           /* H2, H3 — near-black */
  --ink-soft: #1A1A1A;      /* body & H1 */
  --ink-medium: #2A2A2A;
  --silver: #8C8C8C;        /* secondary text, captions */
  --silver-light: #AAAAAA;
  --nav-link: #555555;      /* navigation links */

  /* ── Borders & pattern ───────────────────────── */
  --border: rgba(0, 0, 0, 0.08);   /* hairline borders */
  --dot: rgba(0, 0, 0, 0.09);      /* dot-grid pattern */

  /* ── Semantic aliases ────────────────────────── */
  --bg-page: var(--paper);
  --bg-card: var(--cream);
  --bg-card-hover: var(--white);
  --bg-code: var(--cream-dark);

  --text-heading: var(--ink);
  --text-title: var(--ink-soft);
  --text-body: var(--ink-soft);
  --text-muted: var(--silver);
  --text-faint: var(--silver-light);
  --text-nav: var(--nav-link);
  --accent: var(--gold);
  --accent-hover: var(--gold-light);

  --surface-border: var(--border);
}
/* Extella — Typography tokens */
:root {
  /* Single typeface across the whole brand */
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  /* ── Type scale ──────────────────────────────── */
  --fs-h1: 60px;            /* hero headline */
  --fs-h2: 49px;            /* section headline */
  --fs-h3: 18px;            /* card / sub heading */
  --fs-body-lg: 20px;       /* lead body */
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-badge: 12px;         /* uppercase labels */
  --fs-section-num: 13px;   /* 01 — markers */

  /* ── Weights ─────────────────────────────────── */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */

  /* ── Line heights ────────────────────────────── */
  --lh-tight: 1.08;         /* @kind font */
  --lh-snug: 1.3;           /* @kind font */
  --lh-body: 1.6;           /* @kind font */

  /* ── Letter spacing ──────────────────────────── */
  --ls-tight: -0.02em;      /* large headlines @kind font */
  --ls-normal: 0;           /* @kind font */
  --ls-badge: 0.22em;       /* spaced uppercase labels @kind font */

  /* ── Semantic aliases ────────────────────────── */
  --text-heading-weight: var(--fw-bold);
  --text-body-weight: var(--fw-regular);
}
/* Extella — Spacing, radii, shadows */
:root {
  /* ── Spacing scale (8pt-ish, airy) ───────────── */
  --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-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-card: 16px;
  --radius-pill: 100px;     /* buttons, badges */

  /* ── Shadows (soft, low-contrast) ────────────── */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.07);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ── Dot-grid background pattern ─────────────── */
  --dot-size: 22px;         /* grid cell @kind spacing */
  --dot-radius: 1px;        /* dot radius @kind spacing */
  --bg-dots: radial-gradient(var(--dot) var(--dot-radius), transparent var(--dot-radius)); /* @kind other */

  /* ── Motion ──────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms;      /* @kind other */
}