/* ── Krown · Design tokens de app (Linear-style) ─────────────────────────
   Fuente única para las apps MVC (netline + id), servida desde cdn.krown.world.
   id añade overrides locales (sidebar-w, shake) sobre este archivo.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces - cool deep charcoal */
  --bg-0:     oklch(0.155 0.005 260);
  --bg-1:     oklch(0.180 0.005 260);
  --bg-2:     oklch(0.215 0.006 260);
  --bg-3:     oklch(0.255 0.006 260);
  --bg-hover: oklch(0.235 0.007 260);

  /* Borders - hairline white */
  --border:        rgba(255, 255, 255, 0.06);
  --border-mid:    rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text-1: oklch(0.97 0.004 260);
  --text-2: oklch(0.72 0.008 260);
  --text-3: oklch(0.52 0.010 260);
  --text-4: oklch(0.38 0.010 260);

  /* Accent - Krown brand red #9B111E */
  --accent:        oklch(0.44 0.18 23);
  --accent-hover:  oklch(0.50 0.18 23);
  --accent-soft:   oklch(0.44 0.18 23 / 0.12);
  --accent-border: oklch(0.44 0.18 23 / 0.35);
  --accent-text:   oklch(0.72 0.16 23);

  /* Semantic */
  --green:  oklch(0.72 0.16 155);
  --amber:  oklch(0.78 0.16 75);
  --blue:   oklch(0.70 0.14 235);
  --violet: oklch(0.68 0.16 295);
  --rose:   oklch(0.70 0.18 15);

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px;

  /* Layout */
  --sidebar-w: 250px;
  --topbar-h: 56px;

  /* Type */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-body:    var(--font-ui);    /* legacy alias */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-size-stat: clamp(1.75rem, 3vw, 2.5rem);

  /* Density (cozy default) */
  --row-h: 32px;
  --pad-y: 8px;

  /* Motion */
  --t-fast: 80ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-base: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-slow: 280ms cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Backward-compat aliases ──────────────────────────────────────── */
  /* Old token names that existing CSS/views still reference. */
  --bg-darkest:        var(--bg-0);
  --bg-dark:           var(--bg-1);
  --bg-base:           var(--bg-0);
  --bg-card:           var(--bg-1);
  --bg-card-alt:       var(--bg-2);

  --surface-0:         var(--bg-0);
  --surface-1:         var(--bg-1);
  --surface-2:         var(--bg-2);
  --surface-3:         var(--bg-3);

  --accent-red:        var(--accent);
  --accent-red-hover:  var(--accent-hover);
  --accent-red-subtle: var(--accent-soft);

  --border-hover:      var(--border-strong);
  --border-low:        var(--border);
  --border-hi:         var(--border-strong);
  --border-subtle:     var(--border);

  --radius-sm:   var(--r-sm);
  --radius-btn:  var(--r-md);
  --radius-card: var(--r-lg);
  --radius-lg:   var(--r-lg);
  --radius:      var(--r-md);
}

[data-density="compact"] {
  --row-h: 28px;
  --pad-y: 6px;
}

/* Light mode (opt-in) */
[data-theme="light"] {
  --bg-0:   oklch(0.99 0.003 260);
  --bg-1:   oklch(0.97 0.003 260);
  --bg-2:   oklch(0.94 0.004 260);
  --bg-3:   oklch(0.91 0.005 260);
  --bg-hover: oklch(0.95 0.004 260);
  --border:        rgba(0, 0, 0, 0.06);
  --border-mid:    rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);
  --text-1: oklch(0.18 0.008 260);
  --text-2: oklch(0.40 0.010 260);
  --text-3: oklch(0.55 0.010 260);
  --text-4: oklch(0.70 0.008 260);
}