/* ============================================================
   Kai dashboards — design tokens

   SOURCE OF TRUTH: the live Dental AI Solutions marketing site
   (My-new-site/New Website/complete.html). Every value below is copied
   from that file's :root block or its component CSS — nothing here is
   invented, and nothing is "close enough".

   Superseded: an earlier revision used warm neutrals (#F7F6F3 paper,
   #E8E4DE hairlines). Those were inferred, not sourced, and are wrong:
   the brand ground is cool pale blue and the neutral ramp is slate.
   ============================================================ */
:root{
  /* ---- brand blues — site :root, verbatim ---- */
  --navy:      #1E3A8A;   /* --navy / --blue-900 · display headings, wordmark */
  --blue-700:  #1D4ED8;
  --cobalt:    #2563EB;   /* --blue-600 · THE accent */
  --blue-500:  #3B82F6;
  --blue-400:  #60A5FA;
  --blue-300:  #93C5FD;   /* the ring/hairline colour, used at low alpha */
  --blue-200:  #BFDBFE;
  --blue-100:  #DBEAFE;
  --blue-50:   #EFF6FF;

  /* ---- slate ramp — site :root, verbatim ---- */
  --slate-900: #0F172A;
  --slate-800: #1E293B;   /* site body text */
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* ---- surfaces ---- */
  --paper:        #F0F6FF;   /* site `body { background }` — cool, luminous  */
  --paper-deep:   #E8F0FE;   /* deeper wash; also the approved login ground  */
  --surface:      #FFFFFF;   /* clean white — cards, sidebar, panels         */
  --surface-soft: #F8FAFC;   /* slate-50 · input fills, table stripes        */

  /* ---- ink ---- */
  --ink:    var(--slate-800);   /* body copy                                  */
  --ink-2:  var(--slate-600);   /* secondary                                  */
  --ink-3:  var(--slate-500);   /* muted / meta                               */
  --ink-display: var(--navy);   /* Playfair headings are ALWAYS navy on site  */

  /* ---- lines: the site borders in BLUE, never neutral grey ----
     .s1-row      border-bottom: 1px solid rgba(147,197,253,0.16)
     .s1-head     border-bottom: 1px solid rgba(147,197,253,0.28)
     .h4-scene .panel  inset 0 0 0 1px rgba(147,197,253,0.35)          */
  --line:        rgba(147,197,253,.28);
  --line-soft:   rgba(147,197,253,.16);
  --line-strong: rgba(147,197,253,.50);
  --ring:        inset 0 0 0 1px rgba(147,197,253,.35);
  --ring-strong: inset 0 0 0 1px rgba(37,99,235,.28);

  /* ---- brand accent washes ---- */
  --cobalt-wash: rgba(37,99,235,.10);   /* .omni-tag background            */
  --cobalt-tint: var(--blue-50);
  --cobalt-hover:var(--blue-700);

  /* ---- login ground (approved screen; matches the site atmosphere) ---- */
  --login-bg: #E8F0FE;
  --login-g1: #C7DCFB;
  --login-g2: #BDD4F8;
  --login-g3: #DDE9FD;

  /* ---- semantic. Cobalt is brand, never an outcome colour. ---- */
  --ok:         #1E7A4C;  --ok-wash:      #E6F3EB;
  --warn:       #8A5A12;  --warn-wash:    #F7EFDA;
  --urgent:     #B42D1D;  --urgent-wash:  #FBEBE8;
  --critical:   #911D10;  --critical-wash:#F7E6E3;
  --info:       #4058C7;  --info-wash:    #E9EDFB;

  /* ---- chart palette (validated for CVD separation) ---- */
  --ch-booked:      #1F7A4D;
  --ch-rescheduled: #4A63C9;
  --ch-callback:    #BC8A2E;
  --ch-emergency:   #C13A2C;
  --ch-cancelled:   #8A56C9;
  --ch-none:        #C7CDD8;
  --ch-volume:      var(--cobalt);

  /* ---- type — site :root, verbatim ----
     --font-display: 'Playfair Display', serif   → LARGE titles only
     --font-body:    'Outfit', system-ui, sans   → everything else       */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'Outfit', system-ui, -apple-system, sans-serif;

  /* ---- geometry — site uses pills for controls, 12/20px for panels ---- */
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-input: 12px;
  --r-card:  20px;
  --r-login: 24px;
  --r-pill:  100px;   /* .btn / .s2-chip border-radius:100px */

  /* ---- shadows: cobalt-tinted glow, never neutral grey ----
     .btn-primary  0 4px 20px rgba(37,99,235,0.3)
     .s2-chip.active 0 4px 14px rgba(37,99,235,0.32)                    */
  --shadow-btn:      0 4px 20px rgba(37,99,235,.30);
  --shadow-btn-hover:0 6px 24px rgba(37,99,235,.38);
  --shadow-card:     var(--ring), 0 1px 2px rgba(15,23,42,.03);
  --shadow-raise:    var(--ring), 0 8px 30px rgba(37,99,235,.07);
  --shadow-lift:     0 12px 44px rgba(37,99,235,.12), 0 2px 8px rgba(15,23,42,.04);
  --shadow-pop:      0 8px 28px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);

  --sidebar-w: 244px;
  --tabbar-h:  62px;
}