/* ============================================================
 * Kind Group — Foundations
 * Colors, gradients, typography, spacing, radii, shadows.
 * Pull this into any HTML artifact that uses the Kind Group brand.
 * ============================================================ */

@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Primary palette ---------- */
  --kg-limoncello: #FBB911;     /* primary brand yellow */
  --kg-black:      #000000;
  --kg-white:      #FFFFFF;

  /* ---------- Secondary palette ---------- */
  --kg-tangerine:  #FF5D26;
  --kg-cherry:     #AF1644;
  --kg-purple:     #60338E;
  --kg-charcoal:   #30373D;     /* primary dark background */
  --kg-slate:      #7D7580;
  --kg-toupe:      #A29696;
  --kg-ivory:      #EFEDE7;     /* warm neutral background */

  /* ---------- Tints (10/30/50/70/90) — toolkit shows percent tints  ---------- */
  /* Limoncello tints */
  --kg-limoncello-10: #FEF1CF;
  --kg-limoncello-30: #FDDF8B;
  --kg-limoncello-50: #FDCD46;
  --kg-limoncello-70: #FCC02A;
  --kg-limoncello-90: #FBB915;

  /* Tangerine tints */
  --kg-tangerine-10: #FFDFD4;
  --kg-tangerine-30: #FFB196;
  --kg-tangerine-50: #FF8358;
  --kg-tangerine-70: #FF6F3A;
  --kg-tangerine-90: #FF5D26;

  /* Cherry tints */
  --kg-cherry-10:    #F1D0DA;
  --kg-cherry-30:    #DE85A2;
  --kg-cherry-50:    #CB4869;
  --kg-cherry-70:    #B82252;
  --kg-cherry-90:    #AF1644;

  /* Purple tints */
  --kg-purple-10:    #DFD6EA;
  --kg-purple-30:    #B59FCC;
  --kg-purple-50:    #8669AE;
  --kg-purple-70:    #6D479B;
  --kg-purple-90:    #60338E;

  /* Charcoal tints */
  --kg-charcoal-10:  #D6D7D9;
  --kg-charcoal-30:  #9A9DA0;
  --kg-charcoal-50:  #696D72;
  --kg-charcoal-70:  #444A4F;
  --kg-charcoal-90:  #30373D;

  /* Ivory tints (warm off-white scale) */
  --kg-ivory-10:     #FDFCFA;
  --kg-ivory-30:     #F8F6F2;
  --kg-ivory-50:     #F4F1EC;
  --kg-ivory-70:     #F0EDE7;
  --kg-ivory-90:     #EFEDE7;

  /* ---------- Gradients ---------- */
  /* Primary gradient: Tangerine → Limoncello (everyday warmth) */
  --kg-gradient-primary: linear-gradient(90deg, var(--kg-tangerine) 0%, var(--kg-limoncello) 100%);
  --kg-gradient-primary-v: linear-gradient(180deg, var(--kg-tangerine) 0%, var(--kg-limoncello) 100%);

  /* Secondary gradient: Purple → Cherry → Tangerine → Limoncello (intensity / hero moments) */
  --kg-gradient-secondary: linear-gradient(90deg, var(--kg-purple) 0%, var(--kg-cherry) 30%, var(--kg-tangerine) 65%, var(--kg-limoncello) 100%);
  --kg-gradient-secondary-v: linear-gradient(180deg, var(--kg-purple) 0%, var(--kg-cherry) 30%, var(--kg-tangerine) 65%, var(--kg-limoncello) 100%);

  /* Spectrum used in Kind Certified frame stroke */
  --kg-gradient-certified: linear-gradient(90deg, var(--kg-purple), var(--kg-cherry), var(--kg-tangerine), var(--kg-limoncello));

  /* ---------- Semantic surfaces ---------- */
  --kg-bg:            var(--kg-ivory);       /* default page background */
  --kg-bg-elevated:   var(--kg-white);
  --kg-bg-inverse:    var(--kg-charcoal);    /* dark mode panel */
  --kg-bg-accent:     var(--kg-limoncello);  /* brand-accent surface */

  /* Foreground / text */
  --kg-fg:            var(--kg-charcoal);    /* default text */
  --kg-fg-muted:      var(--kg-slate);       /* secondary text */
  --kg-fg-subtle:     var(--kg-toupe);       /* tertiary / captions */
  --kg-fg-inverse:    var(--kg-white);       /* text on dark / on gradient */
  --kg-fg-accent:     var(--kg-tangerine);   /* link / interactive accent */

  /* Borders & dividers */
  --kg-border:        rgba(48, 55, 61, 0.12);
  --kg-border-strong: rgba(48, 55, 61, 0.24);
  --kg-border-inverse:rgba(255, 255, 255, 0.18);

  /* Status (derived from palette where possible) */
  --kg-success:       #2F8F5E;
  --kg-warning:       var(--kg-limoncello);
  --kg-danger:        var(--kg-cherry);

  /* ---------- Type scale ---------- */
  --kg-font-sans: "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Weights — Figtree variable supports 300–900 */
  --kg-w-light:     300;        /* @kind font */
  --kg-w-regular:   400;        /* @kind font */
  --kg-w-medium:    500;        /* @kind font */
  --kg-w-semibold:  600;        /* @kind font */
  --kg-w-bold:      700;        /* @kind font */
  --kg-w-extrabold: 800;        /* @kind font */
  --kg-w-black:     900;        /* @kind font */

  /* Sizes (rem-based on 16px root) — 200% step between display sizes per toolkit */
  --kg-fs-display-xl: 6.5rem;   /* 104 — hero headline */
  --kg-fs-display-l:  4.5rem;   /* 72 */
  --kg-fs-display-m:  3.25rem;  /* 52 */
  --kg-fs-h1:         2.5rem;   /* 40 */
  --kg-fs-h2:         2rem;     /* 32 */
  --kg-fs-h3:         1.5rem;   /* 24 */
  --kg-fs-h4:         1.25rem;  /* 20 */
  --kg-fs-body-l:     1.125rem; /* 18 */
  --kg-fs-body:       1rem;     /* 16 */
  --kg-fs-body-s:     0.875rem; /* 14 */
  --kg-fs-caption:    0.75rem;  /* 12 */

  /* Line heights */
  --kg-lh-tight:    1.05;        /* @kind font */
  --kg-lh-snug:     1.18;        /* @kind font */
  --kg-lh-normal:   1.4;         /* @kind font */
  --kg-lh-relaxed:  1.55;        /* @kind font */

  /* Letter spacing */
  --kg-ls-tight:    -0.02em;     /* @kind font */
  --kg-ls-snug:     -0.01em;     /* @kind font */
  --kg-ls-normal:   0;           /* @kind font */
  --kg-ls-wide:     0.04em;      /* @kind font */
  --kg-ls-eyebrow:  0.12em;     /* used on small caps eyebrow labels @kind font */

  /* ---------- Spacing scale (4px base) ---------- */
  --kg-space-0:  0;
  --kg-space-1:  0.25rem;   /* 4  */
  --kg-space-2:  0.5rem;    /* 8  */
  --kg-space-3:  0.75rem;   /* 12 */
  --kg-space-4:  1rem;      /* 16 */
  --kg-space-5:  1.5rem;    /* 24 */
  --kg-space-6:  2rem;      /* 32 */
  --kg-space-7:  3rem;      /* 48 */
  --kg-space-8:  4rem;      /* 64 */
  --kg-space-9:  6rem;      /* 96 */
  --kg-space-10: 8rem;      /* 128 */

  /* ---------- Radii ---------- */
  --kg-radius-xs:   2px;
  --kg-radius-sm:   6px;
  --kg-radius-md:   12px;
  --kg-radius-lg:   20px;
  --kg-radius-xl:   28px;
  --kg-radius-pill: 999px;
  --kg-radius-card: 24px;  /* default card */

  /* ---------- Shadows / elevation ---------- */
  --kg-shadow-sm:
    0 1px 2px rgba(48, 55, 61, 0.06),
    0 1px 1px rgba(48, 55, 61, 0.04);
  --kg-shadow-md:
    0 6px 14px rgba(48, 55, 61, 0.08),
    0 2px 4px rgba(48, 55, 61, 0.06);
  --kg-shadow-lg:
    0 20px 40px -12px rgba(48, 55, 61, 0.18),
    0 8px 16px -8px rgba(48, 55, 61, 0.10);
  --kg-shadow-glow:
    0 10px 24px -12px rgba(255, 93, 38, 0.50),
    0 3px 10px -6px rgba(251, 185, 17, 0.38);

  /* ---------- Motion ---------- */
  --kg-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --kg-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --kg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
  --kg-dur-fast:    140ms;       /* @kind other */
  --kg-dur-base:    220ms;       /* @kind other */
  --kg-dur-slow:    380ms;       /* @kind other */

  /* Container */
  --kg-max-w: 1200px;            /* @kind spacing */
}

/* ============================================================
 * Semantic element styles
 * ============================================================ */

html, body {
  font-family: var(--kg-font-sans);
  color: var(--kg-fg);
  background: var(--kg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--kg-fs-body);
  line-height: var(--kg-lh-relaxed);
  font-weight: var(--kg-w-light);   /* per toolkit: body copy in FigTree Light */
}

/* Display & headings — Figtree SemiBold in sentence case per toolkit */
.kg-display-xl,
.kg-display-l,
.kg-display-m,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kg-font-sans);
  font-weight: var(--kg-w-semibold);
  line-height: var(--kg-lh-tight);
  letter-spacing: var(--kg-ls-tight);
  color: var(--kg-fg);
  margin: 0;
  text-wrap: balance;
}

.kg-display-xl { font-size: var(--kg-fs-display-xl); }
.kg-display-l  { font-size: var(--kg-fs-display-l); }
.kg-display-m  { font-size: var(--kg-fs-display-m); }

h1 { font-size: var(--kg-fs-h1); line-height: var(--kg-lh-snug); }
h2 { font-size: var(--kg-fs-h2); line-height: var(--kg-lh-snug); }
h3 { font-size: var(--kg-fs-h3); line-height: var(--kg-lh-snug); letter-spacing: var(--kg-ls-snug); }
h4 { font-size: var(--kg-fs-h4); line-height: var(--kg-lh-snug); letter-spacing: var(--kg-ls-snug); }
h5 { font-size: var(--kg-fs-body-l); font-weight: var(--kg-w-semibold); }
h6 { font-size: var(--kg-fs-body); font-weight: var(--kg-w-semibold); }

p {
  margin: 0 0 var(--kg-space-4) 0;
  font-size: var(--kg-fs-body);
  font-weight: var(--kg-w-light);
  line-height: var(--kg-lh-relaxed);
  color: var(--kg-fg);
  text-wrap: pretty;
}
p.kg-lead {
  font-size: var(--kg-fs-body-l);
  line-height: var(--kg-lh-relaxed);
  color: var(--kg-fg);
}
small, .kg-caption {
  font-size: var(--kg-fs-caption);
  font-weight: var(--kg-w-regular);
  color: var(--kg-fg-muted);
  letter-spacing: var(--kg-ls-snug);
}

/* Eyebrow / kicker label — used above section headings */
.kg-eyebrow {
  font-size: var(--kg-fs-caption);
  font-weight: var(--kg-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--kg-ls-eyebrow);
  color: var(--kg-fg-muted);
}

/* Pull-quote: Medium / italic, brand colour permitted */
blockquote, .kg-quote {
  font-family: var(--kg-font-sans);
  font-style: italic;
  font-weight: var(--kg-w-medium);
  font-size: var(--kg-fs-h3);
  line-height: var(--kg-lh-snug);
  color: var(--kg-tangerine);
  margin: 0;
  padding: 0;
}

/* Stat — the punchline. +66% / +18% / +23% */
.kg-stat {
  font-family: var(--kg-font-sans);
  font-weight: var(--kg-w-extrabold);
  font-size: var(--kg-fs-display-l);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--kg-tangerine);
  font-variant-numeric: tabular-nums;
}

/* The signature arrow construct: Unbalanced → Balanced */
.kg-contrast {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-weight: var(--kg-w-semibold);
}
.kg-contrast .kg-arrow {
  color: var(--kg-tangerine);
  font-weight: var(--kg-w-bold);
}

/* Links */
a {
  color: var(--kg-fg-accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--kg-dur-fast) var(--kg-ease-out),
              opacity var(--kg-dur-fast) var(--kg-ease-out);
}
a:hover { text-decoration: underline; }
a:active { opacity: 0.75; }

/* Code / mono */
code, pre {
  font-family: var(--kg-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--kg-ivory-50);
  border: 1px solid var(--kg-border);
  border-radius: var(--kg-radius-xs);
  padding: 0.08em 0.4em;
}

/* Selection */
::selection {
  background: var(--kg-limoncello);
  color: var(--kg-charcoal);
}

/* Focus ring — always Tangerine, brand mechanic */
:focus-visible {
  outline: 2px solid var(--kg-tangerine);
  outline-offset: 2px;
  border-radius: var(--kg-radius-xs);
}

/* Utility */
.kg-on-dark { color: var(--kg-fg-inverse); }
.kg-on-dark p, .kg-on-dark small, .kg-on-dark .kg-caption { color: rgba(255,255,255,0.78); }
.kg-on-dark .kg-eyebrow { color: rgba(255,255,255,0.6); }
.kg-on-dark a { color: var(--kg-limoncello); }