/* ==========================================================================
   Kliow Design System v7 — Colors & Type tokens
   Editorial-modern with bento grid color blocks.
   ========================================================================== */

/* ==========================================================================
   Self-hosted brand fonts — 8 face declarations, no external imports.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Fraunces-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Fraunces-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Fraunces-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Fraunces-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
}

:root {
  /* ----------------------------------------------------------------------
     COLORS
     ---------------------------------------------------------------------- */

  /* Primary layer (dominant — 70/20 distribution) */
  --kl-paper:       #FAF7F0;   /* page background */
  --kl-forest:      #1F3D27;   /* primary text, CTAs, dramatic blocks */
  --kl-sage:        #9DB89B;   /* signature color */

  /* Accent layer (microaccents — 10% in rotation) */
  --kl-butter:      #F4DD8E;
  --kl-coral:       #F4A88A;
  --kl-lilac:       #C9C2DC;

  /* Functional layer (rare — real alerts only) */
  --kl-cinnabar:    #C8412C;

  /* Soft tints of microaccents (used inside mockups: pendency rows etc) */
  --kl-butter-soft: #FBF1CE;   /* butter @ ~30% over paper */
  --kl-coral-soft: #FBDDCD;
  --kl-lilac-soft: #E5E1F0;
  --kl-sage-soft:  #DCE5DB;
  --kl-cinnabar-soft: #F2D6CF;

  /* Forest tints for borders, dividers, subtle text */
  --kl-forest-90:  rgba(31, 61, 39, 0.90);
  --kl-forest-70:  rgba(31, 61, 39, 0.70);
  --kl-forest-55:  rgba(31, 61, 39, 0.55);
  --kl-forest-40:  rgba(31, 61, 39, 0.40);
  --kl-forest-12:  rgba(31, 61, 39, 0.12);
  --kl-forest-08:  rgba(31, 61, 39, 0.08);
  --kl-forest-06:  rgba(31, 61, 39, 0.06);

  /* Pure white — only allowed inside the page for mockup cards */
  --kl-white:       #FFFFFF;

  /* ----------------------------------------------------------------------
     SEMANTIC ALIASES
     ---------------------------------------------------------------------- */
  --bg-page:        var(--kl-paper);
  --bg-dramatic:    var(--kl-forest);   /* hero / final CTA block */
  --bg-mockup:      var(--kl-white);

  --fg-primary:     var(--kl-forest);
  --fg-secondary:   rgba(31, 61, 39, 0.80);
  --fg-muted:       rgba(31, 61, 39, 0.75);
  --fg-on-dark:     var(--kl-paper);
  --fg-accent-on-dark: var(--kl-sage);

  --border-subtle:  var(--kl-forest-08);
  --border-card:    var(--kl-forest-12);

  --alert:          var(--kl-cinnabar);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — families
     ---------------------------------------------------------------------- */
  --font-display:   'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — type scale (px values, only these sizes)
     ---------------------------------------------------------------------- */
  --t-hero-size:        88px;
  --t-hero-lh:          0.92;
  --t-hero-track:       -4px;

  --t-section-size:     60px;
  --t-section-lh:       1.05;
  --t-section-track:    -2.5px;

  --t-giant-size:       80px;     /* giant numbers: 60-96px */
  --t-giant-lh:         0.92;
  --t-giant-track:      -3px;

  --t-sub-size:         40px;     /* subheadline 32-48 */
  --t-sub-lh:           1.05;
  --t-sub-track:        -1px;

  --t-body-lg-size:     19px;
  --t-body-lg-lh:       1.5;

  --t-body-size:        16px;
  --t-body-lh:          1.55;

  --t-body-sm-size:     14px;
  --t-body-sm-lh:       1.5;

  --t-mono-size:        12px;
  --t-mono-lh:          1.4;
  --t-mono-track:       1px;

  --t-mono-mini-size:   10px;
  --t-mono-mini-lh:     1.4;
  --t-mono-mini-track:  1.5px;

  /* ----------------------------------------------------------------------
     SPACING
     ---------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  --section-gap-desktop: 112px;
  --section-gap-mobile:  72px;

  --page-pad-desktop: 40px;
  --page-pad-mobile:  20px;

  --bento-gap: 16px;

  --max-page:    1200px;
  --max-reading: 600px;
  --max-hero:    880px;

  /* ----------------------------------------------------------------------
     RADII (no zero — minimum 12px)
     ---------------------------------------------------------------------- */
  --r-pill:   100px;          /* buttons + badges always */
  --r-card-lg: 24px;          /* data cards, dramatic cards */
  --r-card:    20px;          /* mockup cards */
  --r-card-sm: 16px;          /* white neutral cards */
  --r-pendency: 12px;         /* pendency item inside mockups */

  /* ----------------------------------------------------------------------
     SHADOWS (subtle only — and only on mockup cards)
     ---------------------------------------------------------------------- */
  --shadow-mockup:    0 16px 48px rgba(31, 61, 39, 0.14);
  --shadow-mockup-lg: 0 24px 64px rgba(31, 61, 39, 0.16);
  --shadow-pill:      0 8px 24px rgba(31, 61, 39, 0.12);

  /* ----------------------------------------------------------------------
     MOTION (subtle only)
     ---------------------------------------------------------------------- */
  --t-fast:   120ms ease-out;
  --t-base:   200ms ease-out;
}

/* ==========================================================================
   BASE
   ========================================================================== */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--kl-sage); color: var(--kl-forest); }

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   Apply directly: <h1 class="t-hero">…</h1>
   ========================================================================== */

.t-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-lh);
  letter-spacing: var(--t-hero-track);
  color: var(--fg-primary);
}
.t-hero em, .t-hero .t-italic { font-style: italic; font-weight: 600; }

.t-section {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-section-size);
  line-height: var(--t-section-lh);
  letter-spacing: var(--t-section-track);
  color: var(--fg-primary);
}
.t-section em, .t-section .t-italic { font-style: italic; }

.t-giant {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-giant-size);
  line-height: var(--t-giant-lh);
  letter-spacing: var(--t-giant-track);
  color: var(--fg-primary);
}

.t-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-sub-size);
  line-height: var(--t-sub-lh);
  letter-spacing: var(--t-sub-track);
  color: var(--fg-primary);
}

.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
  color: var(--fg-secondary);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-secondary);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  color: var(--fg-secondary);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-lh);
  letter-spacing: var(--t-mono-track);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.t-mono-mini {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-mono-mini-size);
  line-height: var(--t-mono-mini-lh);
  letter-spacing: var(--t-mono-mini-track);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-italic { font-style: italic; }

/* ==========================================================================
   LOGO — Fraunces "K" bold-italic + "liow" medium regular
   Use: <span class="kl-logo">K<span>liow</span></span>
   ========================================================================== */
.kl-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  display: inline-block;
}
.kl-logo > :first-letter,
.kl-logo .kl-logo-k {
  font-weight: 700;
  font-style: italic;
}
/* Variant on dark backgrounds */
.kl-logo--paper { color: var(--kl-paper); }