/* ============================================================
   KOOLD DESIGN SYSTEM — Colors & Typography
   Version 1.0 | April 2026 | CIRCAT MEDIA
   ============================================================ */

/* ── Cormorant Garamond — Local Variable Fonts ────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── DM Sans + Outfit — Google Fonts ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {

  /* ── Brand Colors ─────────────────────────────────────── */
  --koold-deep-void:       #0F384D;  /* Primary dark bg */
  --koold-arctic-night:    #37657B;  /* Secondary surfaces */
  --koold-storm-layer:     #4A7A90;  /* Mid-tone — BORDERS & SURFACES ONLY. Never use as text color (contrast too low on Deep Void). */
  --koold-signal-ice:      #FEEC7E;  /* Accent — max 15% */
  --koold-pulse-green:     #B2DE7B;  /* Success / compliance */
  --koold-compliance:      #589E84;  /* Trust / healthcare */
  --koold-cloud-dancer:    #F0EEE9;  /* Warm white / light bg */
  --koold-darkest-depth:   #191919;  /* Campaign black / text on light */

  /* ── Semantic Colors — Dark Theme (primary) ───────────── */
  --color-bg-primary:      var(--koold-deep-void);
  --color-bg-secondary:    var(--koold-arctic-night);
  --color-bg-tertiary:     var(--koold-storm-layer);
  --color-bg-campaign:     var(--koold-darkest-depth);

  --color-text-primary:    var(--koold-cloud-dancer);
  --color-text-secondary:  rgba(240, 238, 233, 0.7);
  --color-text-muted:      rgba(240, 238, 233, 0.45);
  --color-text-on-light:   var(--koold-darkest-depth);

  --color-accent:          var(--koold-signal-ice);
  --color-accent-text:     var(--koold-deep-void);
  --color-success:         var(--koold-pulse-green);
  --color-trust:           var(--koold-compliance);

  --color-border:          var(--koold-arctic-night);
  --color-border-accent:   var(--koold-signal-ice);
  --color-border-light:    rgba(15, 56, 77, 0.15);

  /* ── Semantic Colors — Light Theme (campaigns) ────────── */
  --color-light-bg:        var(--koold-cloud-dancer);
  --color-light-text:      var(--koold-darkest-depth);
  --color-light-muted:     rgba(25, 25, 25, 0.55);

  /* ── Typography: Font Families ───────────────────────── */
  --font-headline:   'Cormorant Garamond', Georgia, serif;
  --font-body:       'DM Sans', system-ui, sans-serif;
  --font-display:    'Outfit', system-ui, sans-serif;
  --font-mono:       'Courier New', Courier, monospace;

  /* ── Typography: Scale ───────────────────────────────── */
  /* Display — Cormorant Garamond */
  --text-display-xl:  clamp(48px, 8vw, 96px);   /* Hero, campaign openers */
  --text-display-lg:  clamp(36px, 5vw, 72px);   /* Section heroes */
  --text-display-md:  clamp(28px, 3.5vw, 48px); /* Slide headlines */
  --text-display-sm:  clamp(22px, 2.5vw, 36px); /* Sub-headlines */

  /* UI / Body — DM Sans + Outfit */
  --text-label:   11px;   /* Outfit 600 UPPERCASE — category markers */
  --text-caption: 13px;   /* DM Sans 300 — metadata, footnotes */
  --text-body-sm: 15px;   /* DM Sans 400 — compact body */
  --text-body:    17px;   /* DM Sans 400 — primary body */
  --text-body-lg: 20px;   /* DM Sans 400 — intro paragraphs */
  --text-ui-sm:   13px;   /* DM Sans 500 — UI labels */
  --text-ui:      14px;   /* DM Sans 500 — buttons, nav */
  --text-tagline: clamp(18px, 2vw, 24px); /* Outfit 300–400 — taglines */

  /* ── Typography: Weights ─────────────────────────────── */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ── Typography: Letter-spacing ─────────────────────── */
  --tracking-headline: -0.02em;
  --tracking-sub:      -0.01em;
  --tracking-label:     0.10em;
  --tracking-caption:   0.04em;
  --tracking-button:    0.08em;

  /* ── Typography: Line-heights ────────────────────────── */
  --leading-tight:    1.10;  /* Large display headlines */
  --leading-snug:     1.25;  /* Sub-headlines */
  --leading-normal:   1.50;  /* Body text */
  --leading-relaxed:  1.65;  /* Captions, footnotes */

  /* ── Spacing Scale (8px base) ────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32: 128px;

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:   2px;
  --radius:      4px;    /* Default — sharp, precise */
  --radius-md:   8px;
  --radius-pill: 100px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card:     0 4px 16px rgba(15, 56, 77, 0.12);
  --shadow-card-lg:  0 8px 32px rgba(15, 56, 77, 0.18);
  --shadow-glow-ice: 0 0 24px rgba(254, 236, 126, 0.25);

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition:        0.20s ease;
  --transition-slow:   0.35s ease;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width: 1280px;
  --gutter:      24px;
  --columns:         12;
}

/* ── Semantic Type Elements ───────────────────────────────── */

h1, .h1 {
  font-family: var(--font-headline);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-headline);
  line-height: var(--leading-tight);
}

h2, .h2 {
  font-family: var(--font-headline);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-sub);
  line-height: var(--leading-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-caption);
  line-height: var(--leading-relaxed);
  opacity: 0.7;
}

.tagline {
  font-family: var(--font-display);
  font-size: var(--text-tagline);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
}

.label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
}

/* ── Base Component Classes ───────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1.5px solid var(--koold-signal-ice);
  color: var(--koold-signal-ice);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-ui);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--koold-signal-ice);
  color: var(--koold-deep-void);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--koold-arctic-night);
  border: none;
  color: var(--koold-cloud-dancer);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-ui);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
}
.btn-secondary:hover {
  background: var(--koold-storm-layer);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid rgba(240,238,233,0.25);
  color: var(--koold-cloud-dancer);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-ui);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--koold-cloud-dancer);
  background: rgba(240,238,233,0.06);
}

.card {
  background: var(--koold-arctic-night);
  border: 1px solid var(--koold-storm-layer);
  border-radius: var(--radius);
  padding: var(--space-6);
  color: var(--koold-cloud-dancer);
}
.card-highlight {
  border-left: 3px solid var(--koold-signal-ice);
}

.badge-success    { background: var(--koold-pulse-green);  color: var(--koold-deep-void);    border-radius: var(--radius); padding: 3px 10px; font-size: var(--text-ui-sm); font-weight: var(--weight-medium); }
.badge-compliance { background: var(--koold-compliance);   color: var(--koold-cloud-dancer); border-radius: var(--radius); padding: 3px 10px; font-size: var(--text-ui-sm); font-weight: var(--weight-medium); }
.badge-alert      { background: var(--koold-signal-ice);   color: var(--koold-deep-void);    border-radius: var(--radius); padding: 3px 10px; font-size: var(--text-ui-sm); font-weight: var(--weight-medium); }
.badge-neutral    { background: var(--koold-storm-layer);  color: var(--koold-cloud-dancer); border-radius: var(--radius); padding: 3px 10px; font-size: var(--text-ui-sm); font-weight: var(--weight-medium); }

.divider        { border: none; border-top: 1px solid var(--koold-arctic-night);  margin: var(--space-6) 0; }
.divider-accent { border: none; border-top: 2px solid var(--koold-signal-ice);    margin: var(--space-6) 0; }
