/* CharterSelect Design System — Colors & Type */
/* Brand fonts: DM Serif Display (headlines) + Montserrat (subhead 600 / body 400) */
/* v2 — self-hosted brand fonts */

@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/HEADLINES_DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/BODY_Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/SUBHEAD_Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ BRAND COLORS ============ */
  --cs-teal:       #0F766E;  /* Deep Teal — primary brand */
  --cs-teal-700:   #0B5F58;
  --cs-teal-800:   #084A45;
  --cs-teal-50:    #E6F2F1;

  --cs-gold:       #FBBF24;  /* Gold — moon, accent */
  --cs-gold-600:   #D89A0A;
  --cs-gold-50:    #FEF6E0;

  --cs-sage:       #6B8E75;  /* Sage — secondary */
  --cs-sage-300:   #A8BEAE;
  --cs-sage-50:    #EEF2EF;

  --cs-charcoal:   #1F2937;  /* Charcoal — primary text */
  --cs-charcoal-2: #374151;
  --cs-charcoal-3: #6B7280;

  --cs-gray:       #E5E7EB;  /* Light Gray — borders, surfaces */
  --cs-gray-50:    #F9FAFB;
  --cs-gray-100:   #F3F4F6;
  --cs-gray-200:   #E5E7EB;
  --cs-gray-300:   #D1D5DB;

  --cs-white:      #FFFFFF;
  --cs-cream:      #FBF8F1;  /* warm cream — section bg */

  /* ============ SEMANTIC ============ */
  --fg-1: var(--cs-charcoal);
  --fg-2: var(--cs-charcoal-2);
  --fg-muted: var(--cs-charcoal-3);
  --fg-on-teal: #FFFFFF;
  --fg-link: var(--cs-teal);

  --bg-1: #FFFFFF;
  --bg-2: var(--cs-gray-50);
  --bg-cream: var(--cs-cream);
  --bg-deep: var(--cs-teal);
  --bg-dark: #0A2A2A;

  --border-1: var(--cs-gray-200);
  --border-2: var(--cs-gray-300);
  --border-strong: var(--cs-charcoal-3);

  --accent: var(--cs-gold);
  --accent-soft: var(--cs-gold-50);

  /* ============ TYPE ============ */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

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

  /* type scale */
  --fs-display: clamp(2.75rem, 5vw, 4rem);  /* 44–64 */
  --fs-h1:      clamp(2rem, 3.5vw, 3rem);   /* 32–48 */
  --fs-h2:      2rem;     /* 32 */
  --fs-h3:      1.5rem;   /* 24 */
  --fs-h4:      1.25rem;  /* 20 */
  --fs-lead:    1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 */
  --fs-small:   0.875rem; /* 14 */
  --fs-eyebrow: 0.75rem;  /* 12 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.01em;

  /* ============ SPACING (8px base) ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ============ RADII ============ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12), 0 6px 14px rgba(15, 23, 42, 0.06);
  --shadow-teal: 0 12px 28px rgba(15, 118, 110, 0.22);

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ============ BASE ============ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 400; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 var(--sp-4); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cs-teal);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--cs-teal-700); text-decoration: underline; text-underline-offset: 3px; }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--sp-6) 0; }