/* =========================================================
   KODIE — Brand stylesheet
   Tokens · type · components
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* Teal (primary brand) */
  --teal-50:#E7F3F4;
  --teal-100:#CDE7E9;
  --teal-400:#22B7AE;
  --teal-500:#199AA1;
  --teal-600:#15808E;
  --teal-700:#0E6675;
  --teal-800:#0B4D59;

  /* Ink (deep teal-navy) */
  --ink-900:#0C2630;
  --ink-800:#102E3A;
  --ink-700:#173D49;
  --ink-500:#3D5862;

  /* Warm secondary */
  --amber:#ECA94E;
  --amber-soft:#F7E7CA;
  --clay:#D98A5A;

  /* Neutrals */
  --paper:#F5F7F7;
  --paper-warm:#F7F6F1;
  --surface:#FFFFFF;
  --line:#E2E9EA;
  --line-soft:#EDF1F1;
  --muted:#5E7279;
  --faint:#90A1A6;

  /* Semantic */
  --success:#2E9E6B;
  --warning:#E0A33C;
  --error:#D4574E;

  /* Radii */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* Shadow */
  --sh-sm:0 1px 2px rgba(12,38,48,.06), 0 1px 3px rgba(12,38,48,.05);
  --sh-md:0 4px 14px rgba(12,38,48,.07), 0 2px 6px rgba(12,38,48,.05);
  --sh-lg:0 18px 48px rgba(12,38,48,.12), 0 6px 18px rgba(12,38,48,.07);

  /* Type */
  --display:'Outfit', system-ui, sans-serif;
  --text:'Hanken Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{margin:0;font-family:var(--text);color:var(--ink-800);background:var(--paper);line-height:1.6;}

/* ---------- LOGO ---------- */
.wordmark{
  font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  color:var(--ink-800);line-height:1;display:inline-flex;align-items:flex-end;
  white-space:nowrap;text-decoration:none;
}
.wordmark .dot{
  width:.17em;height:.17em;border-radius:50%;background:var(--teal-400);
  margin-left:.07em;margin-bottom:.055em;flex:none;
}
.wordmark.rev{color:#fff;}
.wordmark.mono{color:var(--ink-800);}
.wordmark.mono .dot{background:currentColor;}
.wordmark.teal{color:var(--teal-600);}

/* monogram tile */
.kmark{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal-600);color:#fff;border-radius:24%;
  font-family:var(--display);font-weight:600;line-height:1;
}

/* ---------- TYPE HELPERS ---------- */
.d-xl{font-family:var(--display);font-weight:600;font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.03em;color:var(--ink-900);}
.d-lg{font-family:var(--display);font-weight:600;font-size:clamp(32px,4vw,46px);line-height:1.06;letter-spacing:-.025em;color:var(--ink-900);}
h1,.h1{font-family:var(--display);font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-.02em;color:var(--ink-900);margin:0;}
h2,.h2{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.015em;color:var(--ink-900);margin:0;}
h3,.h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.01em;color:var(--ink-800);margin:0;}
.lead{font-size:19px;line-height:1.55;color:var(--ink-700);}
.body{font-size:16px;color:var(--ink-700);}
.small{font-size:14px;color:var(--muted);}
.eyebrow{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-600);}
.mono-num{font-variant-numeric:tabular-nums;}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  border:none;border-radius:var(--r-pill);padding:13px 24px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;transition:.16s ease;text-decoration:none;line-height:1;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--teal-700);color:#fff;box-shadow:var(--sh-sm);}
.btn-primary:hover{background:var(--teal-800);transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-secondary{background:var(--surface);color:var(--ink-800);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn-secondary:hover{box-shadow:inset 0 0 0 1.5px var(--teal-400);color:var(--teal-700);}
.btn-ghost{background:transparent;color:var(--teal-700);padding-left:8px;padding-right:8px;}
.btn-ghost:hover{color:var(--teal-800);}
.btn-amber{background:var(--amber);color:var(--ink-900);}
.btn-amber:hover{background:#E59C36;}
.btn-lg{font-size:17px;padding:16px 30px;}
.btn-sm{font-size:13.5px;padding:9px 16px;}

/* ---------- BADGES / PILLS ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--text);font-weight:600;
  font-size:13px;padding:5px 12px;border-radius:var(--r-pill);line-height:1.2;white-space:nowrap;}
.pill-teal{background:var(--teal-50);color:var(--teal-700);}
.pill-amber{background:var(--amber-soft);color:#9A6B22;}
.pill-success{background:#E4F3EC;color:#1F7A4F;}
.pill-line{background:transparent;box-shadow:inset 0 0 0 1.4px var(--line);color:var(--muted);}
.pill .d{width:7px;height:7px;border-radius:50%;background:currentColor;}

/* ---------- CARD ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-md);
  border:1px solid var(--line-soft);}

/* ---------- INPUT ---------- */
.field{font-family:var(--text);font-size:15px;color:var(--ink-800);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:100%;outline:none;transition:.15s;}
.field::placeholder{color:var(--faint);}
.field:focus{border-color:var(--teal-400);box-shadow:0 0 0 4px var(--teal-50);}
.label{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink-700);margin-bottom:6px;display:block;}

/* ---------- ICON ---------- */
.icon{width:24px;height:24px;display:inline-block;color:var(--ink-800);}
.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.icon-tile{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--teal-50);color:var(--teal-700);}
.icon-tile .icon{width:24px;height:24px;color:inherit;}