/* =========================================================
   KIARY — Colors & Type
   Pottery workshops + artisan boutique.
   Warm, earthy, editorial. French-first.
   ========================================================= */

/* ---------- Fonts ----------
   Display: Fraunces — the site uses a transitional serif with a
     strong italic; Fraunces matches that warmth and has a great
     italic cut. (Free, Google Fonts.)
   Text: Inter — neutral humanist sans for UI + paragraphs.
   Mono: JetBrains Mono — for any code/spec use.
   NOTE: Fraunces is a substitution for the site's current serif
     (appears to be a custom or commercial serif). Flagged in README.
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color — Earth / Clay palette ---------- */
  /* Neutrals — off-white paper to deep espresso */
  --paper:         #F7F1E8;   /* page background — warm off-white */
  --paper-2:       #EFE6D7;   /* elevated surface / subtle card */
  --paper-3:       #E4D6BF;   /* sand — dividers, soft fills */
  --clay-50:       #F1E4D0;
  --clay-100:      #E3C8A4;
  --clay-200:      #D4A878;   /* biscuit */
  --clay-300:      #B9814E;   /* mid-tone clay */
  --clay-400:      #9A5E34;   /* terracotta shadow */
  --clay-500:      #7A4524;   /* fired clay */
  --espresso:      #3D2418;   /* primary text, dark brand */
  --ink:           #1F130B;   /* max-contrast ink */

  /* Primary — terracotta */
  --terracotta-50:  #FBEDE1;
  --terracotta-100: #F4D1B4;
  --terracotta-200: #E8A77A;
  --terracotta-300: #D17F4E;
  --terracotta-400: #B55F30;  /* primary accent */
  --terracotta-500: #8E4621;
  --terracotta-600: #6B331A;

  /* Secondary — olive/sage (studio greenery, glaze) */
  --sage-50:       #EDEEE4;
  --sage-100:      #D5D7C2;
  --sage-200:      #A7AC89;
  --sage-300:      #7A815B;
  --sage-400:      #5A6041;

  /* Accent — wet-clay blue-green (glaze highlight) */
  --glaze-100:     #C6D3CE;
  --glaze-200:     #86A197;
  --glaze-300:     #4D6B61;

  /* Semantic */
  --success:       #5A6041;
  --warning:       #C08A3E;
  --danger:        #A63D23;
  --info:          #4D6B61;

  /* Foreground / background tokens (semantic) */
  --bg:            var(--paper);
  --bg-elev:       #FBF6EC;
  --bg-inset:      var(--paper-2);
  --bg-dark:       var(--espresso);
  --bg-accent:     var(--terracotta-400);

  --fg-1:          var(--espresso);  /* primary text */
  --fg-2:          #5A4332;          /* secondary text */
  --fg-3:          #8A7564;          /* tertiary / captions */
  --fg-inv:        var(--paper);     /* text on dark */
  --fg-accent:     var(--terracotta-400);

  --border:        rgba(61, 36, 24, 0.12);
  --border-strong: rgba(61, 36, 24, 0.24);
  --divider:       rgba(61, 36, 24, 0.08);

  /* ---------- Type ---------- */
  --font-display:  'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-text:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (modular, 1.25 minor-third, with editorial jumps at display sizes) */
  --fs-xs:     12px;
  --fs-sm:     14px;
  --fs-base:   16px;
  --fs-md:     18px;
  --fs-lg:     20px;
  --fs-xl:     24px;
  --fs-2xl:    32px;
  --fs-3xl:    44px;
  --fs-4xl:    64px;
  --fs-5xl:    88px;
  --fs-6xl:   120px;   /* editorial hero */

  /* Line-height */
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.18em;  /* uppercase eyebrows */

  /* ---------- Spacing (4px base) ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;
  --s-11: 160px;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, warm) ---------- */
  --shadow-xs: 0 1px 2px rgba(61, 36, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(61, 36, 24, 0.08);
  --shadow-md: 0 8px 24px rgba(61, 36, 24, 0.10);
  --shadow-lg: 0 24px 48px -12px rgba(61, 36, 24, 0.18);
  --shadow-xl: 0 40px 80px -20px rgba(61, 36, 24, 0.25);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-hero:   720ms;

  /* ---------- Layout ---------- */
  --container-max:  1360px;
  --container-text:  720px;
  --gutter:          24px;
  --gutter-lg:       48px;
}

/* =========================================================
   Semantic element defaults
   ========================================================= */
html { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — editorial serif, mixes roman + italic */
.k-display,
h1.k-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.k-display em,
h1.k-hero em { font-style: italic; font-weight: 400; }

h1, .k-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
h2, .k-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
h3, .k-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--fg-1);
}
h4, .k-h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.3;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.k-eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .k-body {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: var(--container-text);
}
.k-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.k-small, small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.k-caption {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
}

code, .k-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--clay-500);
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover {
  text-decoration-color: var(--fg-accent);
  color: var(--fg-accent);
}

hr.k-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--terracotta-100);
  color: var(--espresso);
}