/* ============================================================
   FRANZ KOHLACK — Foundations: Color + Type
   ============================================================
   A premium consulting brand. Gold leaf on deep ink, set on
   warm paper. Type pairs Cinzel (wide classical caps for the
   wordmark and section labels), Cormorant Garamond (elegant
   serif display for headlines and quotes), and Manrope (clean
   modern sans for body and UI).
   ============================================================ */

/* ---------- Webfonts (Google CDN) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Gold (primary brand) ----------
     Warm metallic gold, derived from the foil texture
     in the FK monogram. The 500 stop is the canonical
     "Kohlack Gold" used in marks and accents. */
  --gold-50:  #FBF6E7;
  --gold-100: #F5EBD0;
  --gold-200: #ECDAA6;
  --gold-300: #E0C57A;
  --gold-400: #D2B05A;
  --gold-500: #C9A14A;  /* Kohlack Gold */
  --gold-600: #A88130;
  --gold-700: #856321;
  --gold-800: #5E4617;
  --gold-900: #3A2C0E;

  /* ---------- Ink (neutral / black) ----------
     Slightly warm black — pure #000 reads cold next
     to gold. Ink-900 is the canonical background. */
  --ink-50:   #F4F2EE;
  --ink-100:  #E2DED5;
  --ink-200:  #C4BEB1;
  --ink-300:  #9A9385;
  --ink-400:  #6E685B;
  --ink-500:  #4A453B;
  --ink-600:  #2F2C25;
  --ink-700:  #1F1D18;
  --ink-800:  #14130F;
  --ink-900:  #0A0908;  /* Canonical black */

  /* ---------- Paper (warm light) ----------
     The off-black brand needs an off-white. Cream
     backgrounds keep the gold from going cheap. */
  --paper:    #FAF7F0;
  --paper-2:  #F2EDDF;
  --paper-3:  #E8E1CC;
  --white:    #FFFFFF;

  /* ---------- Semantic (sparingly used) ---------- */
  --success:  #5C7A4F;
  --warning:  #B8862A;
  --danger:   #8B3A2E;
  --info:     #3F5E78;

  /* ---------- Gold gradient (foil) ----------
     For the K-monogram and special emphasis only.
     Mimics the leaf-foil texture in the logo. */
  --gradient-foil:
    linear-gradient(135deg,
      #E8C977 0%,
      #C9A14A 28%,
      #8C6A22 52%,
      #D9B765 78%,
      #A4801F 100%);
  --gradient-ink:
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);

  /* ---------- Foreground / background tokens ---------- */
  /* Default theme: paper background, ink type. */
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);

  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-600);   /* secondary text */
  --fg-3: var(--ink-400);   /* tertiary / captions */
  --fg-mute: var(--ink-300);

  --accent: var(--gold-600);     /* readable on paper */
  --accent-strong: var(--gold-700);
  --hairline: rgba(10, 9, 8, 0.12);
  --hairline-strong: rgba(10, 9, 8, 0.22);

  /* ---------- Type families ---------- */
  --font-wordmark: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-display:  'Cormorant Garamond', 'Cormorant', 'Garamond', 'Times New Roman', serif;
  --font-body:     'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (rem) ---------- */
  --fs-eyebrow: 0.75rem;    /* 12 */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-body-s:  0.875rem;   /* 14 */
  --fs-body:    1rem;       /* 16 */
  --fs-body-l:  1.125rem;   /* 18 */
  --fs-lead:    1.375rem;   /* 22 */
  --fs-h6:      1.25rem;    /* 20 */
  --fs-h5:      1.5rem;     /* 24 */
  --fs-h4:      2rem;       /* 32 */
  --fs-h3:      2.625rem;   /* 42 */
  --fs-h2:      3.5rem;     /* 56 */
  --fs-h1:      5rem;       /* 80 */
  --fs-hero:    7.5rem;     /* 120 */

  /* ---------- Tracking (letter-spacing) ---------- */
  --track-wide:    0.24em;   /* wordmark / eyebrows */
  --track-mid:     0.12em;   /* section labels */
  --track-tight:  -0.015em;  /* large display */
  --track-normal:  0;

  /* ---------- Line-height ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-display: 1.1;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  /* ---------- Radii ----------
     The brand leans architectural. Hairline rounding
     only — never pill-shaped except on tag chips. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ---------- Spacing (8pt grid w/ 4pt half-steps) ---------- */
  --space-0:   0;
  --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;
  --space-11: 192px;

  /* ---------- Shadows ----------
     Almost no shadows. The brand earns depth from
     contrast, gold edges, and hairline rules. */
  --shadow-1: 0 1px 0 rgba(10, 9, 8, 0.06);
  --shadow-2: 0 4px 16px -8px rgba(10, 9, 8, 0.18);
  --shadow-3: 0 24px 48px -24px rgba(10, 9, 8, 0.35);
  --shadow-gold-glow: 0 0 0 1px rgba(201, 161, 74, 0.4),
                      0 8px 30px -10px rgba(201, 161, 74, 0.35);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ---------- Dark theme (ink background) ---------- */
.theme-ink, [data-theme="ink"] {
  --bg-1: var(--ink-900);
  --bg-2: var(--ink-800);
  --bg-3: var(--ink-700);

  --fg-1: var(--paper);
  --fg-2: var(--ink-200);
  --fg-3: var(--ink-300);
  --fg-mute: var(--ink-400);

  --accent: var(--gold-400);
  --accent-strong: var(--gold-300);
  --hairline: rgba(245, 235, 208, 0.14);
  --hairline-strong: rgba(245, 235, 208, 0.28);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply these classes directly
   ============================================================ */

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--fg-2);
}

.h-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h5, h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h6, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.body-s, small {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

.mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

.quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Gold-foil text fill (use sparingly — monogram, accent caps) */
.foil {
  background: var(--gradient-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hairline rule with optional centered ornament */
.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-6) 0;
}
.rule-gold {
  border-top: 1px solid var(--accent);
}