/* =============================================================================
   KinCulture Co — Design Tokens
   Cream-canvas, claymation-warm B2B brand. Earthy saturated palette.
   ============================================================================= */

/* ---- Webfonts -------------------------------------------------------------- */
/* Plain Black (the brand display face) is licensed and not on public CDNs.
   Fraunces is the closest free substitute for its rounded-warm display feel
   (Recoleta would also work if licensed). Inter handles body + UI. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---- Color · Brand & accent --------------------------------------------- */
  --color-primary:          #1C3320;  /* deep forest green — CTAs, ink */
  --color-brand-pink:       #C8A96E;  /* antique gold feature card */
  --color-brand-teal:       #1C3320;  /* deep forest green feature card */
  --color-brand-lavender:   #A8B89A;  /* soft sage feature card */
  --color-brand-peach:      #D4B896;  /* warm parchment-peach feature card */
  --color-brand-ochre:      #C8A96E;  /* antique gold / ochre */
  --color-brand-mint:       #A8B89A;  /* sage accent */
  --color-brand-coral:      #8B5A3C;  /* walnut accent */

  /* ---- Color · Surface ---------------------------------------------------- */
  --color-canvas:               #FAF7F2;  /* parchment cream — page floor */
  --color-surface-soft:         #F4EFE6;  /* footer / CTA-band background */
  --color-surface-card:         #EFE8D9;  /* cream feature & testimonial cards */
  --color-surface-strong:       #E5DCC7;  /* emphasized bands */
  --color-surface-dark:         #1C3320;  /* rare dark cards */
  --color-surface-dark-elevated:#2A4530;  /* elevated dark cards */
  --color-hairline:             #D9D2C2;  /* 1px borders */

  /* ---- Color · Text ------------------------------------------------------- */
  --color-ink:         #1C3320;
  --color-body-strong: #2A2520;
  --color-body:        #4A4238;
  --color-muted:       #7A7060;
  --color-muted-soft:  #A89E8A;
  --color-on-primary:  #FAF7F2;
  --color-on-dark:     #FAF7F2;

  /* ---- Color · Semantic --------------------------------------------------- */
  --color-success: #5A7A4A;
  --color-warning: #C8A96E;
  --color-error:   #A8443A;

  /* ---- Type · Families ---------------------------------------------------- */
  --font-display: "Fraunces", "Recoleta", "Plain Black", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type · Scale (token → size / weight / line-height / tracking) ----- */
  --t-display-xl-size: 72px;  --t-display-xl-weight: 500; --t-display-xl-lh: 1.0;  --t-display-xl-tr: -2.5px;
  --t-display-lg-size: 56px;  --t-display-lg-weight: 500; --t-display-lg-lh: 1.05; --t-display-lg-tr: -2px;
  --t-display-md-size: 40px;  --t-display-md-weight: 500; --t-display-md-lh: 1.1;  --t-display-md-tr: -1px;
  --t-display-sm-size: 32px;  --t-display-sm-weight: 500; --t-display-sm-lh: 1.15; --t-display-sm-tr: -0.5px;
  --t-title-lg-size:   24px;  --t-title-lg-weight:   600; --t-title-lg-lh:   1.3;  --t-title-lg-tr:   -0.3px;
  --t-title-md-size:   18px;  --t-title-md-weight:   600; --t-title-md-lh:   1.4;  --t-title-md-tr:   0;
  --t-title-sm-size:   16px;  --t-title-sm-weight:   600; --t-title-sm-lh:   1.4;  --t-title-sm-tr:   0;
  --t-body-md-size:    16px;  --t-body-md-weight:    400; --t-body-md-lh:    1.55; --t-body-md-tr:    0;
  --t-body-sm-size:    14px;  --t-body-sm-weight:    400; --t-body-sm-lh:    1.55; --t-body-sm-tr:    0;
  --t-caption-size:    13px;  --t-caption-weight:    500; --t-caption-lh:    1.4;  --t-caption-tr:    0;
  --t-caption-up-size: 12px;  --t-caption-up-weight: 600; --t-caption-up-lh: 1.4;  --t-caption-up-tr: 1.5px;
  --t-button-size:     14px;  --t-button-weight:     600; --t-button-lh:     1.0;  --t-button-tr:     0;
  --t-nav-link-size:   14px;  --t-nav-link-weight:   500; --t-nav-link-lh:   1.4;  --t-nav-link-tr:   0;

  /* ---- Spacing (4px base) ------------------------------------------------- */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:     12px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section:96px;

  /* ---- Radius ------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  12px;   /* buttons, inputs */
  --radius-lg:  16px;   /* content cards */
  --radius-xl:  24px;   /* feature cards */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---- Elevation (deliberately minimal — depth comes from color) --------- */
  --shadow-none:      none;
  --shadow-hairline:  inset 0 0 0 1px var(--color-hairline);
  --shadow-soft:      0 1px 2px rgba(28, 51, 32, 0.04), 0 4px 12px rgba(28, 51, 32, 0.04);

  /* ---- Container ---------------------------------------------------------- */
  --container-max: 1280px;
}

/* =============================================================================
   Semantic element styles
   ============================================================================= */
html, body {
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--t-body-md-size);
  line-height: var(--t-body-md-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-xl-size);
  font-weight: var(--t-display-xl-weight);
  line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-tr);
  color: var(--color-ink);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-display-lg-size);
  font-weight: var(--t-display-lg-weight);
  line-height: var(--t-display-lg-lh);
  letter-spacing: var(--t-display-lg-tr);
  color: var(--color-ink);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-display-md-size);
  font-weight: var(--t-display-md-weight);
  line-height: var(--t-display-md-lh);
  letter-spacing: var(--t-display-md-tr);
  color: var(--color-ink);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--t-display-sm-size);
  font-weight: var(--t-display-sm-weight);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-tr);
  color: var(--color-ink);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--t-title-lg-size);
  font-weight: var(--t-title-lg-weight);
  line-height: var(--t-title-lg-lh);
  letter-spacing: var(--t-title-lg-tr);
  color: var(--color-ink);
  margin: 0;
}
h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--t-title-md-size);
  font-weight: var(--t-title-md-weight);
  line-height: var(--t-title-md-lh);
  color: var(--color-ink);
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body-md-size);
  font-weight: var(--t-body-md-weight);
  line-height: var(--t-body-md-lh);
  color: var(--color-body);
  margin: 0;
}
small, .caption {
  font-family: var(--font-body);
  font-size: var(--t-caption-size);
  font-weight: var(--t-caption-weight);
  line-height: var(--t-caption-lh);
  color: var(--color-muted);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-caption-up-size);
  font-weight: var(--t-caption-up-weight);
  line-height: var(--t-caption-up-lh);
  letter-spacing: var(--t-caption-up-tr);
  text-transform: uppercase;
  color: var(--color-muted);
}
a, .text-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-body-strong);
}