/* ────────────────────────────────────────────────────────────
   Daven Design System — Color & Type Tokens
   v1.0 · May 2026
   Single-font system (Inter) on a dark-first dashboard surface.
   ──────────────────────────────────────────────────────────── */

/* Brand fonts — Inter family (4 used weights) + Inter Display for display
   sizes. .ttf files ship in /fonts/ relative to the design-system root.   */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.ttf')  format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter-Italic.ttf')   format('truetype'); }

/* Optional display face — same metrics, slightly tighter for KPI metrics. */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/InterDisplay-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/InterDisplay-SemiBold.ttf') format('truetype'); }

:root {
  /* ── Brand · Primary purple ───────────────────────────────── */
  --daven-primary-50:   #f3e6ff;
  --daven-primary-100:  #d9b3ff;
  --daven-primary-200:  #be80ff;
  --daven-primary-300:  #c966ff;   /* used as light/active text on dark */
  --daven-primary-500:  #a600ff;   /* ✦ canonical brand purple */
  --daven-primary-600:  #8a00d4;   /* hover */
  --daven-primary-700:  #6b00a3;
  --daven-primary-900:  #3d005e;

  --daven-primary:        var(--daven-primary-500);
  --daven-primary-hover:  var(--daven-primary-600);
  --daven-primary-light:  var(--daven-primary-300);
  --daven-primary-faint:  rgba(166, 0, 255, 0.12);
  --daven-primary-ring:   rgba(166, 0, 255, 0.10);

  /* ── Brand · Secondary teal/cyan ──────────────────────────── */
  --daven-secondary-50:   #cffaf0;
  --daven-secondary-200:  #7febd5;
  --daven-secondary-400:  #3fdbba;
  --daven-secondary-500:  #00d4a0;   /* ✦ canonical brand teal */
  --daven-secondary-600:  #00a37a;
  --daven-secondary-700:  #006e52;
  --daven-secondary-800:  #004034;
  --daven-secondary-900:  #00251e;

  --daven-secondary:        var(--daven-secondary-500);
  --daven-secondary-dark:   var(--daven-secondary-600);
  --daven-secondary-faint:  rgba(0, 212, 160, 0.12);

  /* ── Dark surface scale (4 steps) ─────────────────────────── */
  --daven-bg-root:        #0c0b12;   /* outermost canvas */
  --daven-bg-surface:     #13121a;   /* page surface / sidebar */
  --daven-bg-card:        #1e1c28;   /* card / KPI tile */
  --daven-bg-elevated:    #2a2838;   /* hover / raised input */

  /* ── Semantic ─────────────────────────────────────────────── */
  --daven-success:        #00a37a;
  --daven-success-faint:  rgba(0, 163, 122, 0.15);
  --daven-danger:         #dc2626;
  --daven-danger-faint:   rgba(220, 38, 38, 0.15);
  --daven-warning:        #f59e0b;
  --daven-warning-faint:  rgba(245, 158, 11, 0.15);
  --daven-chart-gold:     #ffca28;
  --daven-chart-gold-faint: rgba(255, 202, 40, 0.12);

  /* ── Holographic gradient (logo identity) ─────────────────── */
  /* Reads top-left → bottom-right of the brand sphere: lemon/lime →
  green → cyan → periwinkle → violet → pink. */
  --daven-holo: linear-gradient(120deg,
  #f4ff6b 0%,
  #d6ff5e 12%,
  #8be88c 28%,
  #5fe6c8 44%,
  #7ec8ff 60%,
  #b5a8ff 78%,
  #e89bff 92%,
  #ff8fb8 100%);

  /* Chart series tokens — line + fill pair */
  --chart-1-line: #a600ff;
  --chart-1-fill: rgba(166, 0, 255, 0.15);
  --chart-2-line: #00d4a0;
  --chart-2-fill: rgba(0, 212, 160, 0.12);
  --chart-3-line: #ffca28;
  --chart-3-fill: rgba(255, 202, 40, 0.12);

  /* ── Foreground (text) on dark ────────────────────────────── */
  --daven-fg-1:   #ffffff;                       /* KPI values, titles */
  --daven-fg-2:   rgba(255, 255, 255, 0.86);     /* body emphasis */
  --daven-fg-3:   rgba(255, 255, 255, 0.60);     /* body */
  --daven-fg-4:   rgba(255, 255, 255, 0.40);     /* muted, captions */
  --daven-fg-5:   rgba(255, 255, 255, 0.30);     /* placeholder, disabled */

  /* Tremor / Tailwind gray equivalents we mirror */
  --daven-gray-200: #e5e7eb;
  --daven-gray-300: #d1d5db;
  --daven-gray-400: #9ca3af;
  --daven-gray-500: #6b7280;
  --daven-gray-700: #374151;

  /* ── Borders ──────────────────────────────────────────────── */
  --daven-border:         rgba(255, 255, 255, 0.10);
  --daven-border-strong:  rgba(255, 255, 255, 0.18);
  --daven-border-focus:   var(--daven-primary-500);

  /* ── Typography ───────────────────────────────────────────── */
  --daven-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --daven-fs-xs:   12px;    --daven-lh-xs: 1.4;
  --daven-fs-sm:   14px;    --daven-lh-sm: 1.5;
  --daven-fs-base: 16px;    --daven-lh-base: 1.5;
  --daven-fs-lg:   18px;    --daven-lh-lg: 1.4;
  --daven-fs-xl:   22px;    --daven-lh-xl: 1.3;
  --daven-fs-2xl:  24px;    --daven-lh-2xl: 1.25;
  --daven-fs-3xl:  30px;    --daven-lh-3xl: 1.2;     /* KPI metric */

  --daven-fw-regular: 400;
  --daven-fw-medium:  500;
  --daven-fw-semi:    600;   /* HARD CEILING — never use 700/800 */

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Elevation (very subtle on dark) ──────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px var(--daven-primary-ring);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
}

/* ────────────────────────────────────────────────────────────
   Semantic role classes (use these in markup)
   ──────────────────────────────────────────────────────────── */

html, body {
  background: var(--daven-bg-root);
  color: var(--daven-fg-2);
  font-family: var(--daven-font);
  font-size: var(--daven-fs-sm);
  line-height: var(--daven-lh-sm);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* Tremor name → role mapping */
.daven-metric {           /* KPI value */
  font-size: var(--daven-fs-3xl);
  line-height: var(--daven-lh-3xl);
  font-weight: var(--daven-fw-semi);
  color: var(--daven-fg-1);
  letter-spacing: -0.01em;
}
.daven-title {            /* Page / card title */
  font-size: var(--daven-fs-lg);
  line-height: var(--daven-lh-lg);
  font-weight: var(--daven-fw-medium);
  color: var(--daven-fg-2);
}
.daven-subtitle {         /* Section label */
  font-size: var(--daven-fs-base);
  line-height: var(--daven-lh-base);
  font-weight: var(--daven-fw-medium);
  color: var(--daven-fg-3);
}
.daven-text {             /* Body */
  font-size: var(--daven-fs-sm);
  line-height: var(--daven-lh-sm);
  font-weight: var(--daven-fw-regular);
  color: var(--daven-fg-3);
}
.daven-text-bold {        /* Body emphasis */
  font-size: var(--daven-fs-sm);
  font-weight: var(--daven-fw-semi);
  color: var(--daven-fg-2);
}
.daven-text-label {       /* Caption / micro */
  font-size: var(--daven-fs-xs);
  line-height: var(--daven-lh-xs);
  font-weight: var(--daven-fw-regular);
  color: var(--daven-fg-4);
  letter-spacing: 0.01em;
}