/* ============================================================
   Schmidt-Sec Design System — Colors & Type
   Manrope only. Navy + Cream + Burgund accent. Kanzlei-tone.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --navy:         #0d1b2a;   /* Primary — headlines, dark blocks, primary buttons */
  --navy-soft:    #1b2a3f;   /* Secondary navy — subtle elevation in dark areas */
  --navy-line:    #0d1b2a14; /* 8% navy for hairlines on cream */

  --cream:        #faf8f3;   /* Page background — warm off-white */
  --cream-warm:   #f1ede4;   /* Section divider / card surface on cream */

  --burgund:      #8b1f2f;   /* Accent — sparingly, on cream */
  --burgund-soft: #a83344;   /* Accent for use on navy backgrounds */

  /* ---------- TEXT ---------- */
  --text:         #1c2532;   /* Body */
  --text-soft:    #4a5364;   /* Secondary body, leads */
  --text-muted:   #6b7587;   /* Tertiary — captions, footnotes */

  /* ---------- LINES & SURFACES ---------- */
  --line:         #d4cfc3;   /* Hairline on cream */
  --line-dark:    rgba(250, 248, 243, 0.18); /* Hairline on navy */

  /* ---------- TYPOGRAPHY ---------- */
  --font:         'Manrope', system-ui, -apple-system, sans-serif;

  /* Type scale (clamps for fluid sizing) */
  --fs-display:   clamp(40px, 5.5vw, 68px);   /* Hero H1 */
  --fs-h2:        clamp(32px, 4.5vw, 48px);   /* Section heading */
  --fs-h3:        24px;                       /* Card / pillar title */
  --fs-h4:        22px;                       /* Sub-title */
  --fs-quote:     clamp(24px, 3.5vw, 38px);   /* Pain hook quote */
  --fs-lead:      19px;                       /* Hero lead */
  --fs-body:      17px;                       /* Default body */
  --fs-body-sm:   16px;                       /* Card body */
  --fs-meta:      14px;                       /* Captions, units */
  --fs-micro:     13px;                       /* Eyebrows, labels */
  --fs-eyebrow:   13px;                       /* Eyebrow / kicker */

  /* Weights (Manrope) */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* Line heights */
  --lh-tight:     1.05;   /* Display headlines */
  --lh-snug:      1.15;   /* H2 / H3 */
  --lh-normal:    1.55;   /* Lead, secondary */
  --lh-body:      1.6;    /* Body */
  --lh-relaxed:   1.7;    /* Long-form */

  /* Tracking */
  --tr-display:   -0.025em;
  --tr-heading:   -0.02em;
  --tr-tight:     -0.015em;
  --tr-normal:    0;
  --tr-eyebrow:   0.08em;   /* Uppercase eyebrows */
  --tr-allcaps:   0.1em;    /* Tighter all-caps (footer headers, ribbons) */

  /* ---------- SPACING ---------- */
  --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:  80px;
  --space-10: 100px;

  /* ---------- LAYOUT ---------- */
  --max:      1240px;
  --gutter:   28px;

  /* ---------- RADII ---------- */
  --radius-sm: 4px;   /* ribbons, small chips */
  --radius:    6px;   /* buttons, cta */
  --radius-md: 8px;   /* cards, image containers */

  /* ---------- SHADOWS ---------- */
  --shadow-card:   0 8px 24px rgba(13, 27, 42, 0.15);
  --shadow-image:  0 30px 60px -20px rgba(13, 27, 42, 0.35);
  --shadow-soft:   0 2px 6px rgba(13, 27, 42, 0.06);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Apply directly to elements when you can't use a class.
   ============================================================ */

body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--navy);
}

h2, .h2 {
  font-family: var(--font);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--navy);
}

h3, .h3 {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--tr-tight);
  color: var(--navy);
}

h4, .h4 {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--text-soft);
}

.eyebrow, .kicker {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--burgund);
}

.eyebrow--on-navy { color: var(--burgund-soft); }

.meta {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.5;
}

.quote {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-quote);
  line-height: 1.35;
  letter-spacing: var(--tr-tight);
}

/* Accent token — used inline within headings */
.accent { color: var(--burgund); }
.accent--on-navy { color: var(--burgund-soft); }