/* =========================================================
   KingDental — Colors & Type tokens
   The full visual language as CSS variables. Import this
   anywhere; everything downstream reads from these.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ----- Brand core ----- */
  --kd-teal:        #5eead4;   /* hero accent — extracted from deck icons */
  --kd-teal-deep:   #2dd4bf;   /* press / hover deepening */
  --kd-teal-soft:   #99f3e1;   /* hover lift */
  --kd-teal-tint:   #d6f9f0;   /* surfaces, callouts */
  --kd-teal-wash:   #ecfbf6;   /* page wash */

  --kd-gold:        #d4a574;   /* diamond gem — extracted from deck */
  --kd-gold-deep:   #b08552;
  --kd-gold-soft:   #e8c89b;
  --kd-gold-tint:   #f5e6cf;

  --kd-platinum:    #d8d4cc;   /* cool silver-cream for Platinum tier */
  --kd-platinum-deep: #a8a39a;
  --kd-silver:      #c8c5be;   /* warm silver for Silver tier */
  --kd-silver-deep: #8b8880;

  /* ----- Surfaces ----- */
  --kd-cream:       #f6f4ef;   /* primary background */
  --kd-cream-deep:  #ece8df;   /* secondary surface */
  --kd-paper:       #fbf9f4;   /* card surface, lifted */
  --kd-ink:         #1a1d1c;   /* primary text — deep near-black */
  --kd-ink-soft:    #2a2e2b;   /* slightly lifted ink */
  --kd-night:       #0e1110;   /* dark mode background */
  --kd-night-soft:  #181b19;

  /* ----- Foreground / text ----- */
  --kd-fg1:         var(--kd-ink);          /* primary text */
  --kd-fg2:         #4a4f4b;                /* secondary text */
  --kd-fg3:         #7a7e78;                /* tertiary, captions */
  --kd-fg-mute:     #9aa09a;                /* watermarks, eyebrows */
  --kd-fg-invert:   var(--kd-cream);

  /* ----- Lines & rules ----- */
  --kd-line:        rgba(26,29,28,0.12);    /* hairlines */
  --kd-line-strong: rgba(26,29,28,0.22);
  --kd-line-soft:   rgba(26,29,28,0.06);

  /* ----- Semantic ----- */
  --kd-success:     #4ea181;
  --kd-warning:     #c98a3a;
  --kd-danger:      #b94a3d;

  /* ----- Radii ----- */
  --kd-r-xs:  2px;
  --kd-r-sm:  4px;
  --kd-r-md:  8px;
  --kd-r-lg:  14px;
  --kd-r-xl:  22px;
  --kd-r-2xl: 32px;
  --kd-r-pill: 999px;

  /* ----- Shadows / elevation -----
     Brand keeps shadows soft, warm, and tight. Avoid heavy drop-shadows. */
  --kd-shadow-1: 0 1px 2px rgba(26,29,28,0.04), 0 1px 1px rgba(26,29,28,0.04);
  --kd-shadow-2: 0 4px 14px -6px rgba(26,29,28,0.10), 0 2px 4px rgba(26,29,28,0.04);
  --kd-shadow-3: 0 14px 40px -16px rgba(26,29,28,0.18), 0 4px 12px -6px rgba(26,29,28,0.08);
  --kd-shadow-gem: 0 24px 60px -30px rgba(212,165,116,0.55), 0 8px 24px -16px rgba(212,165,116,0.4);
  --kd-inner-line: inset 0 0 0 1px var(--kd-line);

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

  /* ----- Type families -----
     Display = Cormorant Garamond (matches the wordmark's high-contrast Didone serif).
     Body / UI = Geist (modern grotesque — supports the "platform / infrastructure" voice).
     Mono = Geist Mono (data, tickers, financials).
     Display caps are letter-spaced ("C O N F I D E N T I A L · 2 0 2 6") — see .kd-caps. */
  --kd-serif:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --kd-sans:   'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --kd-mono:   'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ----- Type scale (semantic) ----- */
  --kd-display-1-size: clamp(56px, 8vw, 128px);
  --kd-display-1-leading: 0.95;
  --kd-display-1-weight: 500;
  --kd-display-1-tracking: -0.02em;

  --kd-display-2-size: clamp(40px, 5.5vw, 84px);
  --kd-display-2-leading: 1.02;
  --kd-display-2-weight: 500;
  --kd-display-2-tracking: -0.015em;

  --kd-h1-size:  clamp(32px, 3.6vw, 56px);
  --kd-h1-leading: 1.08;
  --kd-h1-weight: 500;
  --kd-h1-tracking: -0.012em;

  --kd-h2-size:  28px;
  --kd-h2-leading: 1.18;
  --kd-h2-weight: 500;

  --kd-h3-size:  20px;
  --kd-h3-leading: 1.25;
  --kd-h3-weight: 500;

  --kd-body-size: 16px;
  --kd-body-leading: 1.55;
  --kd-body-weight: 400;

  --kd-small-size: 14px;
  --kd-tiny-size:  12px;

  /* ----- Letter-spaced label ("EYEBROW") ----- */
  --kd-caps-tracking: 0.32em;
  --kd-caps-size: 11px;

  /* ----- Motion ----- */
  --kd-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);    /* gentle ease-out */
  --kd-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --kd-dur-fast:   140ms;
  --kd-dur:        260ms;
  --kd-dur-slow:   520ms;
  --kd-dur-gem:    900ms;  /* the diamond rotates / shimmers slowly */
}

/* =========================================================
   Semantic typography classes
   Use these directly OR mirror the rules in your own
   selectors. Body defaults to sans; serif is opt-in.
   ========================================================= */

.kd-display-1, h1.kd-display {
  font-family: var(--kd-serif);
  font-size: var(--kd-display-1-size);
  line-height: var(--kd-display-1-leading);
  font-weight: var(--kd-display-1-weight);
  letter-spacing: var(--kd-display-1-tracking);
  color: var(--kd-fg1);
}
.kd-display-2 {
  font-family: var(--kd-serif);
  font-size: var(--kd-display-2-size);
  line-height: var(--kd-display-2-leading);
  font-weight: var(--kd-display-2-weight);
  letter-spacing: var(--kd-display-2-tracking);
  color: var(--kd-fg1);
}

.kd-h1 {
  font-family: var(--kd-serif);
  font-size: var(--kd-h1-size);
  line-height: var(--kd-h1-leading);
  font-weight: var(--kd-h1-weight);
  letter-spacing: var(--kd-h1-tracking);
  color: var(--kd-fg1);
}
.kd-h2 {
  font-family: var(--kd-serif);
  font-size: var(--kd-h2-size);
  line-height: var(--kd-h2-leading);
  font-weight: var(--kd-h2-weight);
  color: var(--kd-fg1);
}
.kd-h3 {
  font-family: var(--kd-sans);
  font-size: var(--kd-h3-size);
  line-height: var(--kd-h3-leading);
  font-weight: var(--kd-h3-weight);
  color: var(--kd-fg1);
}

.kd-body, p.kd-p {
  font-family: var(--kd-sans);
  font-size: var(--kd-body-size);
  line-height: var(--kd-body-leading);
  font-weight: var(--kd-body-weight);
  color: var(--kd-fg2);
  text-wrap: pretty;
}
.kd-lede {
  font-family: var(--kd-serif);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--kd-fg2);
  font-style: italic;
}
.kd-small  { font-size: var(--kd-small-size); line-height: 1.45; color: var(--kd-fg2); font-family: var(--kd-sans); }
.kd-tiny   { font-size: var(--kd-tiny-size);  line-height: 1.4;  color: var(--kd-fg3); font-family: var(--kd-sans); }
.kd-mono   { font-family: var(--kd-mono); font-size: 13px; letter-spacing: 0.01em; }

/* ----- The signature letter-spaced caps eyebrow -----
   E X A C T L Y like the deck: "C O N F I D E N T I A L · 2 0 2 6" */
.kd-caps {
  font-family: var(--kd-sans);
  font-size: var(--kd-caps-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--kd-caps-tracking);
  color: var(--kd-fg3);
}

/* ----- Wordmark helper. K and D in teal, middle in fg color -----
   Wrap as <span class="kd-wordmark">King<i>D</i>ental</span>
   or use the dedicated logo SVG. */
.kd-wordmark {
  font-family: var(--kd-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--kd-fg1);
}
.kd-wordmark > i,
.kd-wordmark::first-letter { color: var(--kd-teal); font-style: normal; }

/* ----- Page default ----- */
html, body {
  background: var(--kd-cream);
  color: var(--kd-fg1);
  font-family: var(--kd-sans);
  font-size: var(--kd-body-size);
  line-height: var(--kd-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}