/* =========================================================
   Kavo Tech Hub — shared company site theme
   Link this on every page (before the page's own <style> block,
   and before the Tailwind config script on index.html) so all
   pages share one palette:

     <link rel="stylesheet" href="theme.css">

   Single source of truth for the brand colors. Both the plain-CSS
   pages (pricing.html) and the Tailwind-driven pages (index.html)
   read from these same custom properties, just under different
   names — the Tailwind config maps its Material-3-style tokens to
   these values with var(--x).
   ========================================================= */

:root {
  color-scheme: light;

  /* ---- canonical brand palette ---- */
  --kh-bg:        #F3F1EA;
  --kh-surface:   #FFFFFF;
  --kh-surface-2: #F7F5EF;
  --kh-surface-3: #EFEBDF;
  --kh-surface-4: #E8E3D5;
  --kh-surface-dim: #EDE9DE;
  --kh-white:     #FFFFFF;
  --kh-hairline:  #E1DCCE;
  --kh-outline:   #C9C2AC;
  --kh-ink:       #14181F;
  --kh-muted:     #6B7280;

  --kh-gold:        #B8842E;
  --kh-gold-dim:    #DEB669;
  --kh-gold-tint:   #F3E4C2;
  --kh-gold-ink:    #6B4E17;
  --kh-gold-ink-2:  #3D2B0C;
  --kh-gold-glow:   #E8C77A;

  --kh-teal:        #1E9C82;
  --kh-teal-tint:   #D8F0E9;
  --kh-teal-ink:    #0C4A3D;
  --kh-teal-dim:    #7FCBB8;

  --kh-rose:        #C24E36;
  --kh-rose-tint:   #F6DCD5;
  --kh-rose-ink:    #7A2A19;

  /* ---- pricing.html shorthand aliases (same colors, short names) ---- */
  --bg:        var(--kh-bg);
  --surface:   var(--kh-surface);
  --surface-2: var(--kh-surface-2);
  --hairline:  var(--kh-hairline);
  --ink:       var(--kh-ink);
  --muted:     var(--kh-muted);
  --gold:      var(--kh-gold);
  --teal:      var(--kh-teal);
  --rose:      var(--kh-rose);
}