/* ============================================================
   KEV TANNA — COLORS & TYPE
   The visual primitives. Earthy, muted, intentional.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap");

:root {
  /* ---------- BRAND COLOURS (canonical) ---------- */
  --kt-primary:   #a8521b;   /* Burnt orange. Key UI, slide bgs, accents. */
  --kt-secondary: #8a4416;   /* Deeper burnt. Borders, supporting accents. */
  --kt-dark:      #1e1e1d;   /* Near-black. Body, dark bgs, contrast. */
  --kt-light:     #e8e8e5;   /* Warm off-white. Text on dark, light bgs. */

  /* ---------- TONAL SCALE (derived, do not introduce others) ---------- */
  --kt-primary-700: #7a3a12;
  --kt-primary-600: #934719;
  --kt-primary-500: #a8521b;
  --kt-primary-400: #c1733f;
  --kt-primary-300: #d49b72;

  --kt-dark-900: #1e1e1d;
  --kt-dark-700: #2c2c2a;
  --kt-dark-500: #45453f;

  --kt-light-100: #f1f1ee;
  --kt-light-200: #e8e8e5;   /* canonical light */
  --kt-light-300: #d8d8d2;
  --kt-light-400: #c0c0b8;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:           var(--kt-light-200);
  --bg-elevated: #f1f1ee;
  --bg-inverse:  var(--kt-dark);
  --surface:     var(--kt-light-100);
  --surface-quiet: #ddddd6;

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1: var(--kt-dark);                /* primary text */
  --fg2: #45453f;                       /* secondary text */
  --fg3: #6a6a62;                       /* muted text */
  --fg-on-dark:  var(--kt-light-200);
  --fg-on-dark-2: #b8b8b0;
  --fg-accent: var(--kt-primary);

  /* ---------- BORDERS ---------- */
  --border:        #d0d0c8;
  --border-strong: #a8a89e;
  --border-on-dark: #45453f;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand:    "Caveat", "Karumbi", "Bradley Hand", "Segoe Script", cursive;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (modular, slight 1.25 step) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  /* Display gets tight tracking; body gets generous leading */
  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* Fraunces opsz — display vs text */
  --fraunces-display: "opsz" 144, "SOFT" 30, "WONK" 0;
  --fraunces-text:    "opsz" 14;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- RADIUS (restrained) ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, warm, never blue) ---------- */
  --shadow-1: 0 1px 2px rgba(30,30,29,0.06), 0 1px 1px rgba(30,30,29,0.04);
  --shadow-2: 0 4px 12px rgba(30,30,29,0.08), 0 1px 3px rgba(30,30,29,0.06);
  --shadow-3: 0 12px 32px rgba(30,30,29,0.12), 0 4px 8px rgba(30,30,29,0.06);
  --shadow-press: inset 0 1px 2px rgba(30,30,29,0.12);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- LAYOUT ---------- */
  --content-narrow:  640px;
  --content-default: 880px;
  --content-wide:    1120px;
}

/* ============================================================
   SEMANTIC TEXT STYLES — apply via class
   ============================================================ */

.kt-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--fraunces-display);
  color: var(--fg1);
}

.kt-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.kt-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}

.kt-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.kt-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
}

.kt-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.kt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

.kt-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.kt-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.kt-hand {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

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

.kt-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg2);
}

/* ============================================================
   ELEMENT DEFAULTS — opt in by adding .kt-prose to a wrapper
   ============================================================ */

.kt-prose {
  font-family: var(--font-body);
  color: var(--fg1);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.kt-prose h1 { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; margin: 0 0 var(--space-5); }
.kt-prose h2 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug);  font-weight: 500; margin: var(--space-7) 0 var(--space-3); }
.kt-prose h3 { font-family: var(--font-display); font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: 500; margin: var(--space-6) 0 var(--space-2); }
.kt-prose p  { margin: 0 0 var(--space-4); max-width: 64ch; text-wrap: pretty; }
.kt-prose strong { font-weight: 600; color: var(--fg1); }
.kt-prose a  { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kt-prose a:hover { color: var(--kt-primary-700); }
.kt-prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--kt-primary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg2);
}
.kt-prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}
.kt-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-quiet);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   TEXTURE SYSTEM
   Photographic backgrounds. Always under tone, never decorative.
   Use one base ground colour + one texture utility on the same element.
   ============================================================ */

/* Base modifier — paint the texture image as background.
   Apply to an element that already has a brand colour background;
   the texture multiplies/overlays through it. */
.kt-tex {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
}

/* Each texture is its own utility. Pair with a tone modifier below.
   URLs resolve relative to this stylesheet, so kits two levels deep work. */
.kt-tex--wall-orange    { background-image: url("./assets/textures/wall-orange-shadow.jpg"); }
.kt-tex--linen          { background-image: url("./assets/textures/linen-weave.jpg"); }
.kt-tex--sandstone      { background-image: url("./assets/textures/sandstone-macro.jpg"); }
.kt-tex--suede          { background-image: url("./assets/textures/suede-warm.jpg"); }
.kt-tex--shadow         { background-image: url("./assets/textures/architectural-shadow.jpg"); }
.kt-tex--dark-grid      { background-image: url("./assets/textures/dark-grid-window.jpg"); }
.kt-tex--canyon         { background-image: url("./assets/textures/canyon-curves.jpg"); }

/* Tone modifiers — multiply a brand colour over the texture.
   Use ::after so the texture stays clean and we colour-overlay above. */
.kt-tex--tone-burnt::after,
.kt-tex--tone-dark::after,
.kt-tex--tone-light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.kt-tex--tone-burnt::after { background: var(--kt-primary); mix-blend-mode: multiply; opacity: 0.78; }
.kt-tex--tone-dark::after  { background: var(--kt-dark);    mix-blend-mode: multiply; opacity: 0.72; }
.kt-tex--tone-light::after { background: var(--kt-light);   mix-blend-mode: lighten;  opacity: 0.80; }

/* Quiet variant — texture under a near-solid ground. For subtle paper feel. */
.kt-tex--quiet::after { opacity: 0.92; }

/* Filter the underlying texture to keep colour casts in line. */
.kt-tex--wall-orange,
.kt-tex--linen,
.kt-tex--sandstone,
.kt-tex--suede,
.kt-tex--shadow,
.kt-tex--canyon { filter: saturate(0.7) contrast(1.05); }
.kt-tex--dark-grid { filter: saturate(0.6) contrast(0.95); }

/* Children must lift above the overlay. */
.kt-tex > * { position: relative; z-index: 1; }