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

/* ===== tokens/fonts.css ===== */
/* Webfonts. Geist (UI) is bundled locally as a variable font (weights 100–900,
   roman + italic). Geist Mono (numeric/labels) is loaded from Google Fonts —
   no local files were provided. Swap in local Geist Mono files the same way if
   you want a fully offline system. */

/* Geist Mono — CDN (substitute for missing local files). @import must lead. */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ===== tokens/colors.css ===== */
/* Color tokens.
   Warm cream surfaces + a single confident accent.
   Default accent is Burgundy. Switch the whole system by adding
   data-accent="navy" | "green"  (or class .theme-navy / .theme-green)
   to any ancestor element. */

:root {
  /* Surfaces */
  --bg:          #F4F1EC;   /* page background, warm cream */
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #FBFAF6;   /* inset / secondary fills */
  --ink:         #19181A;   /* near-black panels (e.g. dark cards) */

  /* Lines */
  --border:      #EAE5DD;
  --border-2:    #F1ECE3;

  /* Text */
  --text-1:      #1B1A18;   /* primary */
  --text-2:      #6F6A61;   /* secondary */
  --text-3:      #A8A299;   /* muted / captions */

  /* Accent — Burgundy (default) */
  --accent:      oklch(0.47 0.12 14);
  --accent-deep: oklch(0.41 0.12 14);   /* hover / pressed */
  --accent-soft: oklch(0.955 0.028 14); /* tinted backgrounds */
  --accent-tint: oklch(0.45 0.13 14);   /* text on soft */
  --accent-on:   #FFFFFF;               /* text/icon on accent */

  /* Semantic */
  --success:      #3E8A5B;
  --success-soft: #E6F1EA;
  --warning:      #B07D1E;
  --warning-soft: #F5ECD8;
  --danger:       #BD4B3B;
  --danger-soft:  #F6E2DD;
}

/* ── Accent themes ───────────────────────────────────────────── */
[data-accent="burgundy"], .theme-burgundy {
  --accent:      oklch(0.47 0.12 14);
  --accent-deep: oklch(0.41 0.12 14);
  --accent-soft: oklch(0.955 0.028 14);
  --accent-tint: oklch(0.45 0.13 14);
}
[data-accent="navy"], .theme-navy {
  --accent:      oklch(0.47 0.10 252);
  --accent-deep: oklch(0.41 0.10 252);
  --accent-soft: oklch(0.955 0.022 252);
  --accent-tint: oklch(0.45 0.11 252);
}
[data-accent="green"], .theme-green {
  --accent:      oklch(0.49 0.095 156);
  --accent-deep: oklch(0.43 0.095 156);
  --accent-soft: oklch(0.955 0.030 156);
  --accent-tint: oklch(0.45 0.105 156);
}

/* ===== tokens/typography.css ===== */
/* Typography tokens. One family — Geist — weights 400/500/600.
   Geist Mono for numeric data, IDs, and spec labels. */
:root {
  --font-sans: 'Geist', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Sizes */
  --fs-display: 42px;
  --fs-h1:      30px;
  --fs-h2:      27px;
  --fs-h3:      19px;
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-caption: 11px;

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

  /* Tracking */
  --tracking-tight: -0.03em;  /* display */
  --tracking-snug:  -0.02em;  /* headings */
  --tracking-label:  0.14em;  /* uppercase section labels */

  /* Line height */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug:  1.2; /* @kind font */
  --lh-body:  1.55; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* Spacing scale — 4pt grid. Balanced density. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Common component paddings */
  --pad-card:   24px;   /* inside a card */
  --gap-grid:   20px;   /* between cards */
  --gap-stack:  18px;   /* vertical rhythm */
}

/* ===== tokens/radius.css ===== */
/* Corner radius — generous, iOS-inspired. */
:root {
  --radius-sm:   10px;  /* chips, small controls */
  --radius-md:   14px;  /* inputs, inset fills */
  --radius-lg:   20px;  /* cards */
  --radius-xl:   28px;  /* large panels / app shell */
  --radius-full: 999px; /* pills, avatars, toggles */
}

/* ===== tokens/shadows.css ===== */
/* Elevation — soft, warm-tinted, never harsh. */
:root {
  --shadow-sm: 0 1px 2px rgba(30,28,24,.04), 0 1px 3px rgba(30,28,24,.03);
  --shadow-md: 0 4px 10px rgba(30,28,24,.05), 0 12px 28px rgba(30,28,24,.04);
  --shadow-lg: 0 10px 34px rgba(30,28,24,.09);

  /* Focus ring (uses the active accent) */
  --ring: 0 0 0 3px var(--accent-soft);
}

/* ===== styles.css ===== */
/* Halo Design System — global entry point.
   Consumers link this one file. It only @imports token + font files. */

/* ===== site base ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
main p a,footer p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
main p a:hover,footer p a:hover{color:var(--accent-tint)}
a[style*="background:var(--accent)"]:hover,button:hover{filter:brightness(0.96)}
img,svg{display:block;max-width:100%}
@media (max-width:1000px){
  main > section,main > div > section{padding-left:20px !important;padding-right:20px !important}
  main section[style*="grid-template-columns"] > *{min-width:0}
  main [style*="grid-template-columns:1.05fr 1fr"],
  main [style*="grid-template-columns:1fr 380px"],
  main [style*="grid-template-columns:repeat(3,1fr)"],
  main [style*="grid-template-columns:1.4fr 1fr"],
  main [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  header nav{display:none !important}
  h2{font-size:34px !important}
}