/* Novater Design System — Colors & Type
 * Load this first in any Novater-themed HTML file.
 * Structure:
 *   1. @font-face declarations (Inter, JetBrains Mono via Google Fonts CDN)
 *   2. Primitive tokens (raw palette + type scale)
 *   3. Semantic tokens (fg1/fg2/bg1 etc — use these in components)
 *   4. Element defaults (h1, h2, p, code …)
 */

/* 1. Fonts — Google Fonts CDN (self-host for production) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ————————————————————————————————————————
   * 2. PRIMITIVE TOKENS — raw values
   * ———————————————————————————————————————— */

  /* Brand palette */
  --violet:        #5E18F5;
  --violet-hover:  #4A0FD9;
  --indigo:        #221065;
  --midnight:      #140F42;

  /* Neutrals */
  --white:         #FFFFFF;
  --subtle:        #F7F6FC;   /* violet-tinted section bg */
  --border:        #E6E4F0;
  --text-2:        #4A4570;

  /* Status */
  --success:       #10B981;
  --warning:       #F59E0B;
  --error:         #EF4444;

  /* Type families */
  --font-sans: "Inter", "Work Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-heading: 1.15;
  --lh-body:    1.55;

  /* Spacing (8-pt) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-8:  48px;
  --s-10: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows (subtle — Novater is flat) */
  --shadow-sm: 0 1px 2px rgba(20, 15, 66, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 15, 66, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 15, 66, 0.12);

  /* ————————————————————————————————————————
   * 3. SEMANTIC TOKENS — use these in components
   * ———————————————————————————————————————— */

  /* Foregrounds */
  --fg1: var(--midnight);     /* primary body text */
  --fg2: var(--text-2);       /* secondary text, captions */
  --fg-inverse: var(--white); /* text on dark bg */
  --fg-brand: var(--violet);  /* accent text, link */

  /* Backgrounds */
  --bg1: var(--white);        /* primary page bg */
  --bg2: var(--subtle);       /* subtle tinted section */
  --bg-dark: var(--midnight); /* footers, dark sections */

  /* Surfaces */
  --surface-card: var(--white);
  --surface-header: var(--subtle); /* table header rows */

  /* Borders */
  --line: var(--border);
  --line-strong: var(--midnight);

  /* Interactive */
  --accent: var(--violet);
  --accent-hover: var(--violet-hover);
  --accent-active: var(--indigo);
}

/* ————————————————————————————————————————
 * 4. ELEMENT DEFAULTS
 * ———————————————————————————————————————— */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg1);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg2); }

.display { font-size: var(--fs-5xl); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.025em; }

p { margin: 0 0 var(--s-4); }
.lead { font-size: var(--fs-lg); color: var(--fg1); }
small, .caption { font-size: var(--fs-sm); color: var(--fg2); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--indigo);
}
pre { background: var(--bg2); padding: var(--s-5); border-radius: var(--r-md); overflow: auto; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* Numeric / tabular */
.num { font-variant-numeric: tabular-nums; }