/* ============================================================
   FRANCHISE KOSOVO — Design System Foundations
   colors_and_type.css
   Palette: Deep navy + signature gold + warm paper
   Type:    DM Serif Display / Hanken Grotesk / IBM Plex Mono
   ------------------------------------------------------------
   NOTE: Fonts are loaded from Google Fonts CDN below. These are
   substitutions chosen for a brand-new identity (no supplied
   brand fonts). See README "VISUAL FOUNDATIONS → Typography".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND : NAVY (primary, trust, Kosovo flag blue) ---------- */
  --navy-950: #060F1E;
  --navy-900: #0A1A33;   /* deepest ink-navy — hero backgrounds */
  --navy-800: #0C2340;   /* PRIMARY BRAND NAVY */
  --navy-700: #143257;
  --navy-600: #1C4274;   /* interactive blue */
  --navy-500: #2C5896;
  --navy-400: #5C82B8;
  --navy-300: #9DB4D4;
  --navy-200: #CCD8E8;
  --navy-100: #E7EDF5;

  /* ---------- BRAND : GOLD (signature accent, "the gold standard") ---------- */
  --gold-700: #946B27;
  --gold-600: #B8893B;   /* deep gold — text on light */
  --gold-500: #C8A24B;   /* PRIMARY GOLD */
  --gold-400: #D9BC73;
  --gold-300: #E9D6A3;
  --gold-200: #F2E7C9;
  --gold-100: #F8F1DF;

  /* ---------- NEUTRALS (warm paper → ink) ---------- */
  --paper:    #F7F4ED;   /* primary warm background */
  --paper-2:  #EFEAE0;   /* alt section / sunken */
  --paper-3:  #E6DFD1;   /* hairline on paper */
  --ink:      #14171C;   /* primary text */
  --ink-2:    #3A4049;   /* secondary text */
  --ink-3:    #6A717C;   /* muted / captions */
  --ink-4:    #9AA1AC;   /* disabled / faint */
  --line:     #D8D2C6;   /* default border on paper */
  --line-strong: #C3BBAA;
  --white:    #FFFFFF;

  /* On-dark neutrals */
  --on-navy-1: #F4F6FA;  /* primary text on navy */
  --on-navy-2: #B8C4D6;  /* secondary text on navy */
  --on-navy-3: #7C8BA3;  /* muted text on navy */
  --navy-line: rgba(255,255,255,0.12);
  --navy-line-strong: rgba(255,255,255,0.20);

  /* ---------- SEMANTIC ---------- */
  --success: #1F8A5B;
  --success-bg: #E4F1EA;
  --warning: #C98A1B;
  --warning-bg: #FBF0D8;
  --error:   #C0392B;
  --error-bg: #F8E5E2;
  --info:    var(--navy-600);
  --info-bg: var(--navy-100);

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-2);
  --bg-inverse:  var(--navy-800);
  --surface:     var(--white);
  --surface-2:   var(--paper);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-3);
  --accent:      var(--gold-500);
  --accent-ink:  var(--gold-600);
  --brand:       var(--navy-800);
  --border:      var(--line);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-serif: 'DM Serif Display', 'Georgia', serif;
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale (clamped for responsive) */
  --text-display:  clamp(3.2rem, 6vw, 5.5rem);   /* hero serif */
  --text-h1:       clamp(2.4rem, 4.2vw, 3.6rem);
  --text-h2:       clamp(1.9rem, 3vw, 2.6rem);
  --text-h3:       clamp(1.45rem, 2vw, 1.8rem);
  --text-h4:       1.25rem;
  --text-lead:     clamp(1.1rem, 1.4vw, 1.3rem);  /* intro paragraphs */
  --text-body:     1.0625rem;   /* 17px */
  --text-sm:       0.9375rem;   /* 15px */
  --text-xs:       0.8125rem;   /* 13px */
  --text-eyebrow:  0.75rem;     /* 12px mono labels */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.02em;

  /* ============================================================
     SPACING / RADII / SHADOW / MOTION
     ============================================================ */
  --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: 96px;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, warm, premium (never harsh black) */
  --shadow-xs: 0 1px 2px rgba(12, 35, 64, 0.06);
  --shadow-sm: 0 2px 8px rgba(12, 35, 64, 0.08);
  --shadow-md: 0 10px 30px -8px rgba(12, 35, 64, 0.16);
  --shadow-lg: 0 24px 60px -16px rgba(12, 35, 64, 0.24);
  --shadow-gold: 0 14px 40px -12px rgba(184, 137, 59, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --container: 1200px;
  --container-wide: 1400px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these classes/elements anywhere for consistent type.
   ============================================================ */

.fk-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
}

.fk-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

h1, .fk-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

h2, .fk-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

h3, .fk-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

h4, .fk-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  line-height: 1.3;
  font-weight: 700;
}

.fk-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2);
}

p, .fk-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--ink-2);
}

.fk-small { font-size: var(--text-sm); }
.fk-caption {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-family: var(--font-sans);
}

.fk-stat {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--navy-800);
}

.fk-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}