/* ============================================================
   DataKru design tokens
   Single source of truth. Do not hardcode values elsewhere.
   Version 1.0 · April 2026
============================================================ */

:root {
  /* --- Color: the system ------------------------------------ */
  /* Core two-color ink + bone system. These do the heavy lifting. */
  --dk-ink: #0A0E1A;
  --dk-bone: #F5F1E8;

  /* Signal rust — the accent. Rule: appears at most ONCE per
     view. Its power is its scarcity. Never use for body text. */
  --dk-signal: #C1440E;
  --dk-signal-warm: #E8823A;  /* Warmer variant used on dark bg. */

  /* Ash — warm gray for secondary text and dividers only. */
  --dk-ash: #6B6054;
  --dk-ash-soft: rgba(10, 14, 26, 0.08);   /* dividers on bone */
  --dk-ash-softer: rgba(10, 14, 26, 0.04); /* barely-there lines */

  /* --- Semantic aliases ------------------------------------- */
  --dk-bg: var(--dk-bone);
  --dk-bg-elevated: #FFFFFF;
  --dk-fg: var(--dk-ink);
  --dk-fg-muted: rgba(10, 14, 26, 0.65);
  --dk-fg-subtle: rgba(10, 14, 26, 0.45);
  --dk-border: rgba(10, 14, 26, 0.12);
  --dk-border-strong: rgba(10, 14, 26, 0.25);
  --dk-accent: var(--dk-signal);

  /* --- Typography: stacks ----------------------------------- */
  --dk-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --dk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --dk-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* --- Typography: scale ------------------------------------ */
  /* Display — marketing headlines only */
  --dk-text-display-lg: 72px;
  --dk-text-display-md: 58px;
  --dk-text-display-sm: 44px;

  /* Headings */
  --dk-text-h1: 36px;
  --dk-text-h2: 28px;
  --dk-text-h3: 22px;
  --dk-text-h4: 18px;

  /* Body */
  --dk-text-lg: 18px;    /* lead paragraphs */
  --dk-text-base: 16px;
  --dk-text-sm: 14px;
  --dk-text-xs: 12px;

  /* Micro — only for labels and overlines */
  --dk-text-micro: 11px;
  --dk-text-nano: 10px;

  /* --- Typography: weight ----------------------------------- */
  --dk-weight-regular: 400;
  --dk-weight-medium: 500;
  --dk-weight-semibold: 600;  /* use sparingly */

  /* --- Typography: tracking --------------------------------- */
  /* Negative tracking on display sizes only. Body stays neutral. */
  --dk-tracking-display: -0.045em;
  --dk-tracking-heading: -0.03em;
  --dk-tracking-body: 0em;
  --dk-tracking-overline: 0.22em;  /* uppercase labels only */

  /* --- Typography: leading ---------------------------------- */
  --dk-leading-display: 1.02;
  --dk-leading-heading: 1.15;
  --dk-leading-body: 1.6;
  --dk-leading-tight: 1.3;

  /* --- Spacing: 4px base ------------------------------------ */
  --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-8: 32px;
  --dk-space-10: 40px;
  --dk-space-12: 48px;
  --dk-space-16: 64px;
  --dk-space-20: 80px;
  --dk-space-24: 96px;

  /* --- Radius --------------------------------------------- */
  --dk-radius-sm: 4px;
  --dk-radius-md: 8px;
  --dk-radius-lg: 12px;
  --dk-radius-xl: 16px;
  --dk-radius-pill: 9999px;

  /* --- Motion --------------------------------------------- */
  --dk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dk-duration-fast: 120ms;
  --dk-duration-base: 200ms;
  --dk-duration-slow: 400ms;

  /* --- Layout --------------------------------------------- */
  --dk-content-max: 1200px;
  --dk-prose-max: 680px;

  /* --- Elevation ------------------------------------------ */
  /* Note: use shadows extremely sparingly. Borders do most work. */
  --dk-shadow-focus: 0 0 0 3px rgba(193, 68, 14, 0.25);
}

/* Dark mode — invert the ink/bone relationship */
@media (prefers-color-scheme: dark) {
  :root {
    --dk-bg: var(--dk-ink);
    --dk-bg-elevated: #141826;
    --dk-fg: var(--dk-bone);
    --dk-fg-muted: rgba(245, 241, 232, 0.65);
    --dk-fg-subtle: rgba(245, 241, 232, 0.45);
    --dk-border: rgba(245, 241, 232, 0.12);
    --dk-border-strong: rgba(245, 241, 232, 0.25);
    --dk-accent: var(--dk-signal-warm);
    --dk-ash-soft: rgba(245, 241, 232, 0.08);
    --dk-ash-softer: rgba(245, 241, 232, 0.04);
  }
}

/* Manual override (set by theme toggle) */
:root[data-theme="light"] {
  --dk-bg: var(--dk-bone);
  --dk-bg-elevated: #FFFFFF;
  --dk-fg: var(--dk-ink);
  --dk-fg-muted: rgba(10, 14, 26, 0.65);
  --dk-fg-subtle: rgba(10, 14, 26, 0.45);
  --dk-border: rgba(10, 14, 26, 0.12);
  --dk-border-strong: rgba(10, 14, 26, 0.25);
  --dk-accent: var(--dk-signal);
  --dk-ash-soft: rgba(10, 14, 26, 0.08);
  --dk-ash-softer: rgba(10, 14, 26, 0.04);
}

:root[data-theme="dark"] {
  --dk-bg: var(--dk-ink);
  --dk-bg-elevated: #141826;
  --dk-fg: var(--dk-bone);
  --dk-fg-muted: rgba(245, 241, 232, 0.65);
  --dk-fg-subtle: rgba(245, 241, 232, 0.45);
  --dk-border: rgba(245, 241, 232, 0.12);
  --dk-border-strong: rgba(245, 241, 232, 0.25);
  --dk-accent: var(--dk-signal-warm);
  --dk-ash-soft: rgba(245, 241, 232, 0.08);
  --dk-ash-softer: rgba(245, 241, 232, 0.04);
}

/* --- Base resets (optional — include if starting fresh) ---- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--dk-font-body);
  font-size: var(--dk-text-base);
  line-height: var(--dk-leading-body);
  color: var(--dk-fg);
  background: var(--dk-bg);
  margin: 0;
}

/* --- Utility classes --------------------------------------- */
.dk-display { font-family: var(--dk-font-display); letter-spacing: var(--dk-tracking-display); font-weight: var(--dk-weight-medium); line-height: var(--dk-leading-display); }
.dk-heading { font-family: var(--dk-font-display); letter-spacing: var(--dk-tracking-heading); font-weight: var(--dk-weight-medium); line-height: var(--dk-leading-heading); }
.dk-mono { font-family: var(--dk-font-mono); }
.dk-overline { font-size: var(--dk-text-nano); letter-spacing: var(--dk-tracking-overline); text-transform: uppercase; color: var(--dk-fg-muted); font-weight: var(--dk-weight-medium); }
.dk-signal-dot { display: inline-block; width: 6px; height: 6px; background: var(--dk-accent); border-radius: 50%; vertical-align: middle; }