/* ============================================================================
   KINGDOM SCHOOL OF MINISTRY — Design Tokens
   colors_and_type.css

   BRAND FONTS — both self-hosted from /fonts (official KSM typefaces):
   - Waluxe      → the brand DISPLAY face. Elegant, high-contrast, flared
                   terminals. Used for the wordmark feel, hero headlines,
                   section titles, and pull-quotes. Display only — never body.
   - Montserrat  → the brand SANS. Eyebrows/labels/buttons/nav (uppercase,
                   letterspaced) AND body/UI text. Montserrat Alternates is
                   available as a softer geometric alt for special lockups.
   Paths assume this CSS is imported from the project root; from a subfolder,
   adjust the url() prefixes (e.g. ../fonts/…) or copy the fonts alongside.
   ============================================================================ */

/* ---- Inter (display override — replaces Waluxe for headlines per brand request) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ---- Waluxe (retained for reference; no longer the display face) ---- */
@font-face {
  font-family: 'Waluxe';
  src: url('fonts/Waluxe.woff2') format('woff2'),
       url('fonts/Waluxe.woff') format('woff'),
       url('fonts/Waluxe.ttf') format('truetype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---- Montserrat (sans) — self-hosted weights ---- */
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat Alternates'; src:url('fonts/MontserratAlternates-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat Alternates'; src:url('fonts/MontserratAlternates-SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* ---------- BRAND COLORS ---------- */
  --navy-900: #032A52;   /* deepest — headings on light, dark fills */
  --navy-800: #043C73;
  --navy-700: #004486;   /* PRIMARY — Sovereign Navy */
  --navy-600: #0A5BA8;
  --navy-500: #1672C4;
  --sky-500:  #00AEEF;   /* ACCENT — Royal Sky (links, highlights, active) */
  --sky-300:  #5FC9F4;
  --sky-100:  #D6EEFB;   /* tint backgrounds */

  --gold-600: #B68A36;
  --gold-500: #C9A24B;   /* Heraldic Gold — sparingly: rules, crests, prestige */
  --gold-200: #EBDDBE;

  /* Metallic / silver (from the Silver logo gradient) */
  --silver-700: #707070;
  --silver-500: #9AA1A9;
  --silver-300: #C7CCD1;
  --silver-100: #E9ECEF;

  /* ---------- NEUTRALS / INK ---------- */
  --ink:      #0B1B2B;   /* primary text & dark sections */
  --ink-soft: #101820;
  --slate:    #44515E;   /* secondary text */
  --mute:     #7B8794;   /* tertiary text, captions */
  --line:     #E2E5E9;   /* hairline borders */
  --line-soft:#EEF0F2;
  --parchment:#F6F4EF;   /* warm scholarly background */
  --paper:    #FBFAF7;
  --white:    #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:            var(--white);
  --bg-alt:        var(--parchment);
  --bg-dark:       var(--ink);
  --bg-brand:      var(--navy-700);

  --fg1:           var(--ink);      /* primary text */
  --fg2:           var(--slate);    /* secondary text */
  --fg3:           var(--mute);     /* tertiary / meta */
  --fg-on-dark:    var(--white);
  --fg-on-dark-2:  rgba(255,255,255,0.72);

  --accent:        var(--navy-700);
  --accent-hover:  var(--navy-800);
  --link:          var(--sky-500);
  --link-hover:    var(--navy-700);
  --focus-ring:    rgba(0,174,239,0.45);

  --border:        var(--line);
  --border-strong: var(--silver-300);

  /* ---------- STATUS ---------- */
  --success: #2E7D54;
  --success-bg: #E5F2EB;
  --warning: #B9882F;
  --warning-bg: #FAF1DE;
  --error:   #B23A3A;
  --error-bg:  #FBEAEA;
  --info:    var(--sky-500);
  --info-bg: var(--sky-100);

  /* ---------- TYPOGRAPHY ---------- */
  /* Waluxe is an all-caps titling display face — short, impactful headlines only. */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* body + UI */
  --font-label:   'Montserrat', system-ui, sans-serif;   /* eyebrows, labels, buttons, nav */
  --font-alt:     'Montserrat Alternates', 'Montserrat', sans-serif;  /* softer geometric alt */

  /* Type scale (display = Waluxe caps; everything else = Montserrat) */
  --fs-display:   clamp(3rem, 6vw, 5.25rem);   /* hero display caps */
  --fs-h1:        clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:        clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-lead:      1.25rem;   /* intro paragraphs */
  --fs-body:      1.0625rem;
  --fs-small:     0.9375rem;
  --fs-eyebrow:   0.8125rem;
  --fs-caption:   0.75rem;

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.6;

  --ls-eyebrow: 0.18em;   /* letterspaced caps */
  --ls-label:   0.12em;
  --ls-tight:   -0.01em;

  /* ---------- SPACING (4px 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;

  --container: 1120px;
  --container-narrow: 760px;

  /* ---------- RADII (restrained — crisp, not bubbly) ---------- */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;   /* use only for tiny tags/dots, not buttons */

  /* ---------- SHADOWS (soft, cool, low-spread) ---------- */
  --shadow-sm: 0 1px 2px rgba(11,27,43,0.06), 0 1px 3px rgba(11,27,43,0.05);
  --shadow-md: 0 4px 12px rgba(11,27,43,0.08), 0 2px 4px rgba(11,27,43,0.06);
  --shadow-lg: 0 16px 40px rgba(11,27,43,0.14), 0 4px 12px rgba(11,27,43,0.08);
  --shadow-navy: 0 10px 30px rgba(0,68,134,0.22);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 480ms;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — opt in by importing this file and using classes,
   or copy these rules into a kit. Selectors are class-based to avoid forcing
   global resets on host pages.
   ============================================================================ */

.ksm-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--navy-700);
}
.ksm-eyebrow--gold { color: var(--gold-600); }
.ksm-eyebrow--light { color: var(--sky-300); }

.ksm-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--fg1);
}
h1, .ksm-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--fg1);
}
h2, .ksm-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fg1);
}
h3, .ksm-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg1);
}
h4, .ksm-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--fg1);
}
.ksm-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
p, .ksm-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.ksm-small { font-size: var(--fs-small); color: var(--fg3); }
.ksm-caption {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg3);
}
.ksm-quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.4;
  color: var(--fg1);
}
a, .ksm-link { color: var(--link); text-decoration: none; }
a:hover, .ksm-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Thin heraldic gold rule */
.ksm-rule-gold {
  width: 48px; height: 2px; background: var(--gold-500); border: 0;
}