/* Kaindly webfonts.
   Archivo + Urbanist are the real brand fonts (available on Google Fonts).
   Causten (headers) is a commercial font NOT on Google Fonts — substituted with
   Jost, the closest free geometric sans. Replace with licensed Causten .woff2 for production. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300..700;1,300..500&family=Urbanist:ital,wght@0,300..700;1,300..500&family=Jost:ital,wght@0,400..700;1,400..600&display=swap");

/* ============================================================
   KAINDLY — COLOR TOKENS
   Palette is built on light. One color anchors, one accents.
   Tints step toward white (never reduced opacity).
   ============================================================ */
:root {
  /* --- Brand core --- */
  --violet: #634CC8;        /* Deep purple — primary anchor */
  --periwinkle: #8C6EFC;    /* Mid purple — secondary / dark-mode purple */
  --periwinkle-50: #C6B6FD; /* 50% tint toward white */
  --periwinkle-25: #E2DBFE; /* 25% strength — palest lavender */
  --green: #468B2B;         /* Dark green of the light/dark pair */
  --honeydew: #D4F489;      /* Soft lime — light of the pair */
  --honeydew-50: #EAFAC4;   /* 50% tint toward white */
  --orange: #FBA956;        /* Pure accent. One appearance per layout, max. */

  /* --- Neutrals --- */
  --charcoal: #242424;
  --grey: #DBD9E0;
  --white: #FFFFFF;
  --black: #000000;

  /* --- Neutral steps (charcoal stepped toward white) --- */
  --charcoal-70: #6B6B6B;
  --charcoal-45: #A3A3A3;
  --grey-soft: #EFEEF2;

  /* ============================================================
     SEMANTIC ALIASES — light mode (default)
     ============================================================ */
  --brand: var(--violet);
  --brand-hover: #543FB0;      /* violet stepped toward charcoal */
  --brand-soft: var(--periwinkle);
  --brand-subtle: var(--periwinkle-25);
  --accent: var(--orange);
  --accent-quiet: var(--honeydew);

  --bg: var(--white);
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-muted: var(--grey-soft);
  --surface-brand: var(--violet);
  --surface-accent: var(--honeydew);
  --surface-lavender: var(--periwinkle-25);

  --text-heading: var(--violet);
  --text-body: var(--charcoal);
  --text-muted: var(--charcoal-70);
  --text-faint: var(--charcoal-45);
  --text-on-brand: var(--white);
  --text-on-accent: var(--charcoal);
  --text-link: var(--violet);
  --text-link-hover: var(--brand-hover);

  --border: var(--grey);
  --border-strong: var(--charcoal);
  --border-brand: var(--violet);

  --focus-ring: var(--periwinkle);

  /* Semantic status (derived from palette) */
  --success: var(--green);
  --success-surface: var(--honeydew-50);
  --info: var(--periwinkle);
  --info-surface: var(--periwinkle-25);
}

/* ============================================================
   DARK MODE
   On dark: pale lavender + soft lime become primary surfaces,
   mid purple (periwinkle) replaces deep violet.
   ============================================================ */
[data-theme="dark"] {
  --brand: var(--periwinkle);
  --brand-hover: var(--periwinkle-50);
  --brand-soft: var(--periwinkle-50);
  --brand-subtle: #3A356B;

  --bg: var(--charcoal);
  --surface-page: var(--charcoal);
  --surface-card: #2E2E2E;
  --surface-raised: #383838;
  --surface-muted: #333333;
  --surface-brand: var(--periwinkle);
  --surface-accent: var(--honeydew);
  --surface-lavender: #3A356B;

  --text-heading: var(--honeydew);
  --text-body: #F3F1EA;
  --text-muted: #B8B6BE;
  --text-faint: #86848C;
  --text-on-brand: var(--charcoal);
  --text-on-accent: var(--charcoal);
  --text-link: var(--honeydew);
  --text-link-hover: var(--honeydew-50);

  --border: #454545;
  --border-strong: var(--grey);
  --border-brand: var(--periwinkle);
}

/* ============================================================
   KAINDLY — TYPOGRAPHY TOKENS
   Headers:    Causten (subst. Jost), Bold, Title Case, tracking -0.04em,
               line-height 0.875
   Subheaders: Archivo, Regular, Title Case, 1.1x
   Accents:    Archivo, Light Italic, Title Case, 1.1x
   Body:       Urbanist, Sentence case, tracking +0.05em, line-height 1.3
   Base body anchors the whole scale at 1.0x.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-heading: "Jost", "Causten", "Century Gothic", system-ui, sans-serif;
  --font-subhead: "Archivo", system-ui, sans-serif;
  --font-body: "Urbanist", system-ui, sans-serif;

  /* --- Weights --- */
  --weight-heading: 700;
  --weight-subhead: 400;
  --weight-accent: 300;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 600;

  /* --- Base anchor --- */
  --text-base: 18px;         /* 1.0x baseline for all layouts */
  --leading-body: 1.3;       /* 130% */
  --leading-heading: 0.875;  /* 87.5% */
  --tracking-body: 0.05em;   /* +5 */
  --tracking-heading: -0.04em; /* -40 */

  /* --- Header scale (2.7x anchor, then a modular set) --- */
  --text-display: 3.4rem;    /* hero */
  --text-h1: 2.7rem;         /* 2.7x of base */
  --text-h2: 2.1rem;
  --text-h3: 1.6rem;
  --text-h4: 1.25rem;

  /* --- Supporting sizes --- */
  --text-subhead: 1.1rem;    /* 1.1x */
  --text-accent: 1.1rem;     /* Archivo light italic */
  --text-body-lg: 1.15rem;
  --text-body-sm: 0.9rem;
  --text-caption: 0.8rem;
  --text-button: 0.95rem;
}

html { font-size: var(--text-base); }

/* ============================================================
   KAINDLY — SPACING, RADIUS, SHADOW, LAYOUT TOKENS
   Rounded edges live at 5px (per brand guidelines).
   ============================================================ */
:root {
  /* --- Spacing scale (4px base) --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Radius --- */
  /* Brand rule: shapes & images use rounded edges at 5px. */
  --radius-sm: 3px;
  --radius: 5px;          /* canonical brand radius */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;   /* logo lobes / capsule buttons */

  /* --- Borders --- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* --- Shadows (soft, violet-tinted; brand avoids heavy drop shadows) --- */
  --shadow-xs: 0 1px 2px rgba(36, 36, 36, 0.06);
  --shadow-sm: 0 2px 6px rgba(99, 76, 200, 0.08);
  --shadow-md: 0 6px 20px rgba(99, 76, 200, 0.12);
  --shadow-lg: 0 16px 44px rgba(99, 76, 200, 0.16);
  --shadow-focus: 0 0 0 3px rgba(140, 110, 252, 0.4);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: var(--space-6);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ============================================================
   KAINDLY — base element defaults + helper classes.
   Kept intentionally light: sets typographic defaults so raw
   HTML picks up the brand, and links get brand colors.
   ============================================================ */

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Causten (Jost) bold, tight tracking + line-height */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--text-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

/* Subheaders + accents */
.k-subhead {
  font-family: var(--font-subhead);
  font-weight: var(--weight-subhead);
  font-size: var(--text-subhead);
  color: var(--text-body);
  letter-spacing: 0;
  line-height: 1.35;
}
.k-accent {
  font-family: var(--font-subhead);
  font-weight: var(--weight-accent);
  font-style: italic;
  font-size: var(--text-accent);
  color: var(--text-muted);
}
.k-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--periwinkle-25); color: var(--charcoal); }

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; }