/* ==========================================================================
   dashboard_kit · design tokens
   --------------------------------------------------------------------------
   Every token is a CSS custom property. Themes override only what they need;
   anything they don't override falls through to these defaults.
   ==========================================================================
*/

:root {
  /* ---------- Color · brand ---------- */
  --dk-primary:           #166350;
  --dk-primary-active:    #0C3424;
  --dk-primary-soft:      #3C7C6C;
  --dk-accent:            #88dd99;
  --dk-gold:              #C8963E;

  /* ---------- Color · status ---------- */
  --dk-status-optimal:    #10B981;
  --dk-status-healthy:    #22C55E;
  --dk-status-normal:     #94A3B8;
  --dk-status-attention:  #F59E0B;
  --dk-status-critical:   #EF4444;

  /* ---------- Color · semantic ---------- */
  --dk-info:              #2B6CB0;
  --dk-success:           #16A34A;
  --dk-warning:           #D97706;
  --dk-danger:            #DC2626;

  /* ---------- Color · surface (light mode default) ---------- */
  --dk-bg:                #F8FAFC;
  --dk-surface:           #FFFFFF;
  --dk-surface-raised:    #FFFFFF;
  --dk-surface-inset:     #F1F5F9;
  --dk-surface-glass:     rgba(255, 255, 255, 0.72);
  --dk-surface-hero:      var(--dk-primary);

  /* ---------- Color · text ---------- */
  --dk-text:              #0F172A;
  --dk-text-muted:        #475569;
  --dk-text-faint:        #94A3B8;
  --dk-text-on-hero:      #FFFFFF;
  --dk-text-on-hero-soft: rgba(255, 255, 255, 0.72);

  /* ---------- Color · borders ---------- */
  --dk-border:            #E2E8F0;
  --dk-border-strong:     #CBD5E1;
  --dk-divider:           #F1F5F9;
  --dk-focus-ring:        rgba(22, 99, 80, 0.35);

  /* ---------- Typography ---------- */
  --dk-font-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dk-font-mono:         'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

  --dk-fs-display:        2.75rem;
  --dk-fs-hero:           2rem;
  --dk-fs-h1:             1.5rem;
  --dk-fs-h2:             1.25rem;
  --dk-fs-h3:             1.125rem;
  --dk-fs-body:           0.9375rem;
  --dk-fs-label:          0.8125rem;
  --dk-fs-caption:        0.75rem;
  --dk-fs-mono:           0.8125rem;

  --dk-fw-regular:        400;
  --dk-fw-medium:         500;
  --dk-fw-semibold:       600;
  --dk-fw-bold:           700;

  --dk-lh-tight:          1.2;
  --dk-lh-normal:         1.45;
  --dk-lh-loose:          1.6;

  --dk-tracking-tight:    -0.015em;
  --dk-tracking-normal:   0;
  --dk-tracking-wide:     0.04em;
  --dk-tracking-mono:     0;

  /* ---------- Spacing (4px baseline) ---------- */
  --dk-space-0:           0;
  --dk-space-1:           4px;
  --dk-space-2:           8px;
  --dk-space-3:           12px;
  --dk-space-4:           16px;
  --dk-space-5:           20px;
  --dk-space-6:           24px;
  --dk-space-7:           32px;
  --dk-space-8:           40px;
  --dk-space-9:           56px;
  --dk-space-10:          72px;

  /* ---------- Layout ---------- */
  --dk-radius-xs:         4px;
  --dk-radius-sm:         6px;
  --dk-radius-md:         10px;
  --dk-radius-lg:         16px;
  --dk-radius-xl:         24px;
  --dk-radius-pill:       999px;

  --dk-shadow-flat:       none;
  --dk-shadow-sm:         0 1px 2px rgba(15, 23, 42, 0.06);
  --dk-shadow-md:         0 4px 12px rgba(15, 23, 42, 0.08);
  --dk-shadow-lg:         0 12px 32px rgba(15, 23, 42, 0.10);
  --dk-shadow-hero:       0 16px 48px rgba(22, 99, 80, 0.18);

  --dk-grid-gap:          var(--dk-space-4);
  --dk-card-pad-x:        var(--dk-space-6);
  --dk-card-pad-y:        var(--dk-space-6);

  /* ---------- Motion ---------- */
  --dk-easing:            cubic-bezier(0.4, 0, 0.2, 1);
  --dk-easing-out:        cubic-bezier(0.0, 0, 0.2, 1);
  --dk-dur-instant:       80ms;
  --dk-dur-fast:          160ms;
  --dk-dur-base:          240ms;
  --dk-dur-slow:          360ms;

  /* ---------- Charting palette ---------- */
  --dk-chart-1:           var(--dk-primary);
  --dk-chart-2:           var(--dk-accent);
  --dk-chart-3:           var(--dk-gold);
  --dk-chart-4:           #6366F1;
  --dk-chart-5:           #EC4899;
  --dk-chart-6:           #06B6D4;
  --dk-chart-7:           #84CC16;
  --dk-chart-8:           #F97316;

  --dk-chart-current:     var(--dk-primary);
  --dk-chart-prior:       var(--dk-text-faint);
  --dk-chart-grid:        var(--dk-divider);
  --dk-chart-axis:        var(--dk-text-muted);

  /* ---------- Z-index ---------- */
  --dk-z-base:            1;
  --dk-z-card:            10;
  --dk-z-dropdown:        100;
  --dk-z-tooltip:         200;
  --dk-z-modal:           1000;
}

/* Dark mode default when no theme attribute set and user prefers dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --dk-bg:               #0F172A;
    --dk-surface:          #1E293B;
    --dk-surface-raised:   #273449;
    --dk-surface-inset:    #0F172A;
    --dk-surface-glass:    rgba(30, 41, 59, 0.72);

    --dk-text:             #F8FAFC;
    --dk-text-muted:       #CBD5E1;
    --dk-text-faint:       #64748B;

    --dk-border:           #334155;
    --dk-border-strong:    #475569;
    --dk-divider:          #1E293B;

    --dk-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
    --dk-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
    --dk-shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dk-dur-instant:      0ms;
    --dk-dur-fast:         0ms;
    --dk-dur-base:         0ms;
    --dk-dur-slow:         0ms;
  }
}