/* ==========================================================================
   CSPPE — Design tokens + self-hosted fonts
   Source: design_handoff_csppe_website/design-system-tokens/*.css
   Fonts: latin subset WOFF2, self-hosted (no Google Fonts calls) — SEO spec §3.6
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;           /* variable font: covers bold(700) + black(900) */
  font-display: swap;
  src: url('../csppe-fonts/montserrat-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../csppe-fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../csppe-fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Color tokens ---------- */
:root {
  --violet-500: #8C52FF;
  --violet-700: #6D28D9;
  --violet-100: #EAE5F5;
  --violet-50:  #F5F3FA;
  --cobalt-500: #315ED1;
  --plum-900:   #1B1625;
  --plum-700:   #5A5566;
  --plum-500:   #6B6675;
  --lavender-50:  #FAF9FF;
  --lavender-100: #F5F3FA;
  --lavender-200: #EAE5F5;
  --lavender-300: #D9D4E8;
  --green-600: #16A34A;
  --amber-600: #D97706;
  --red-600:   #DC2626;
  --white:     #FFFFFF;

  --color-primary:        var(--violet-500);
  --color-primary-hover:  var(--violet-700);
  --color-primary-tint:   var(--violet-100);
  --color-accent:         var(--cobalt-500);
  --color-emergency:      #5B2FB8;

  --color-bg:             var(--lavender-50);
  --color-surface:        var(--lavender-100);
  --color-surface-raised: var(--lavender-200);
  --color-border:         var(--lavender-300);

  --text-primary:    var(--plum-900);
  --text-secondary:  var(--plum-700);
  --text-muted:      var(--plum-500);
  --text-on-primary: var(--white);

  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-error:   var(--red-600);

  --ring-primary: 0 0 0 3px rgba(140, 82, 255, .12);
  --glow-primary: 0 4px 12px rgba(140, 82, 255, .25);

  /* Typography */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;

  --fs-display:  64px;
  --fs-headline: 48px;
  --fs-section:  28px;
  --fs-subhead:  20px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;
  --fs-overline: 11px;

  --lh-display:  1.05;
  --lh-headline: 1.1;
  --lh-heading:  1.2;
  --lh-body:     1.6;
  --lh-tight:    1.3;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --ls-tight:  -.02em;
  --ls-normal: 0;
  --ls-wide:   .08em;

  /* Spacing / shape — 4px grid */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-pad: 72px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-hover: 0 4px 16px rgba(27, 22, 37, .06);
  --shadow-float: 0 24px 48px rgba(27, 22, 37, .12);
}

/* ---------- Base ---------- */
body {
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}

a { color: var(--color-accent); }

/* Accessibility: visible focus everywhere — SEO spec §6 */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tap targets ≥ 44px — SEO spec §6 */
.csppe-btn,
button,
input[type="submit"] {
  min-height: 44px;
}

/* Respect reduced-motion; no decorative animation anywhere by design */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Emergency strip (global chrome, all pages) ---------- */
.csppe-emergency-strip {
  background: var(--color-emergency);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 8px 16px;
}
.csppe-emergency-strip strong { font-weight: var(--fw-semibold); }
.csppe-emergency-strip a { color: #fff; text-decoration: underline; }

/* ---------- Utility bar (desktop only) ---------- */
.csppe-utility-bar {
  background: var(--color-primary);
  color: #fff;
  height: 44px;
  font-size: 13px;
}
@media (max-width: 1024px) { .csppe-utility-bar { display: none; } }

/* ---------- Buttons ---------- */
.csppe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  padding: 12px 22px;
  border-radius: var(--radius-input);
  transition: all .15s ease;
  text-decoration: none;
  cursor: pointer;
}
.csppe-btn--primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border: 1px solid var(--color-primary);
}
.csppe-btn--primary:hover {
  background: #7C3AED;
  box-shadow: var(--glow-primary);
  color: #fff;
}
.csppe-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--color-border);
}
.csppe-btn--secondary:hover { background: var(--color-primary-tint); }

/* ---------- Cards ---------- */
.csppe-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.csppe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ---------- Overline ---------- */
.csppe-overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- Contrast guard (SEO spec §6) ----------
   White on #8C52FF is ~4.7:1 — AA only at ≥18px.
   Never set body copy below 18px on a violet band. */
.csppe-violet-band { background: var(--color-primary); color: #fff; }
.csppe-violet-band p,
.csppe-violet-band li { font-size: 18px; line-height: var(--lh-body); }