/* ============================================================
   Kevin Forestell Design System
   Core tokens: color + type
   ============================================================ */

/* --- Font loading: Inter (primary). Substituted for a bespoke
       "sleek sans" — flag to user if a licensed face is preferred. --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — warm neutrals + forest accent
     Palette direction: "neutral warm (bone/linen + ink + sage-green)"
     ---------------------------------------------------------- */

  /* Surfaces */
  --kf-bone:          #F5F1EA; /* page / primary background */
  --kf-linen:         #EDE7DC; /* subtle surface elevation */
  --kf-paper:         #FBF9F4; /* card / inset surface */
  --kf-ivory:         #FFFEFB; /* pure surface, e.g. modals */

  /* Ink (foreground text/structure) */
  --kf-ink:           #1C1C1A; /* primary text */
  --kf-graphite:      #3A3732; /* secondary text, strong labels */
  --kf-stone:         #6B6357; /* tertiary text, metadata */
  --kf-sand:          #9A9083; /* placeholder, disabled */
  --kf-dune:          #B8A689; /* warm mid-tone, dividers on tinted bg */
  --kf-mist:          #D9D3C8; /* hairlines, borders */
  --kf-fog:           #E6E0D4; /* subtle dividers */

  /* Accent — Forest (grounded, trustworthy) */
  --kf-forest:        #2F4A3F; /* primary accent */
  --kf-forest-deep:   #223730; /* hover / pressed */
  --kf-forest-soft:   #567A6C; /* lighter accent, on dark bg */
  --kf-moss:          #8FAEA1; /* tints, bg washes */
  --kf-moss-wash:     #E4ECE7; /* very light accent surface */

  /* Semantic */
  --kf-success:       #2F4A3F; /* reuse forest */
  --kf-warning:       #A67B2A; /* warm ochre, harmonizes with neutrals */
  --kf-error:         #9C3B2E; /* muted terracotta */
  --kf-info:          #3D5A6C; /* slate blue */

  /* Foreground/background aliases (use these in components) */
  --fg-1:   var(--kf-ink);
  --fg-2:   var(--kf-graphite);
  --fg-3:   var(--kf-stone);
  --fg-4:   var(--kf-sand);
  --fg-on-accent: var(--kf-ivory);

  --bg-1:   var(--kf-bone);      /* page */
  --bg-2:   var(--kf-paper);     /* card */
  --bg-3:   var(--kf-linen);     /* raised */
  --bg-accent: var(--kf-forest);
  --bg-accent-soft: var(--kf-moss-wash);

  --border-1: var(--kf-mist);
  --border-2: var(--kf-fog);
  --border-strong: var(--kf-graphite);

  /* ----------------------------------------------------------
     TYPE — Inter, tight but generous, sleek
     Scale uses a 1.250 major-third ratio anchored at 16px
     ---------------------------------------------------------- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif; /* same family, tighter tracking */

  /* Raw size scale */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  /* Weights (sleek = prefer 300/400/500, reserve 600/700 for emphasis) */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  /* Letter spacing */
  --tr-tightest: -0.035em;
  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-widest:   0.14em; /* for eyebrow/kicker */

  /* ----------------------------------------------------------
     SPACING — 4pt base, generous (whitespace = 6/10)
     ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ----------------------------------------------------------
     RADII — soft-rounded (user picked 14)
     ---------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;  /* default card/button radius */
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, warm-ink tinted; sparing use
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 28, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(28, 28, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(28, 28, 26, 0.07), 0 2px 6px rgba(28, 28, 26, 0.04);
  --shadow-lg: 0 20px 48px rgba(28, 28, 26, 0.09), 0 4px 12px rgba(28, 28, 26, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ----------------------------------------------------------
     MOTION — soft, confident. No bounces.
     ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Use these classes (or the CSS vars) in components.
   ============================================================ */

.kf-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.kf-display {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tightest);
  color: var(--fg-1);
}

.kf-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.kf-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.kf-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.kf-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.kf-h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kf-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.kf-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.kf-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.kf-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.kf-label {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tr-snug);
  color: var(--fg-2);
}

.kf-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BASE RESETS (optional, include on full pages)
   ============================================================ */
.kf-reset, .kf-reset * { box-sizing: border-box; }
.kf-reset {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}