/* KolayMiles design tokens — generated from packages/tokens/src/tokens.json.
 *
 * Three layers (DESIGN-SYSTEM.md §3):
 *   L1 primitives — fixed ramps, identical in both themes
 *   L2 semantics  — role tokens; ONLY these are read by components
 *   L3 register   — density/radius/elevation/glass; never palette
 *
 * Prefix is --mi- deliberately: @kolaymarin/modernist owns --km-, and the
 * KolayMiles balance widget is embedded inside KolayMarin surfaces. A collision
 * there would be silent visual corruption.
 *
 * Scope is `:root, [data-mi-scope]` so an embedded widget carries its own scope
 * and leaves the host page untouched.
 *
 * Light is complete on bare :root. A colour whose ONLY definition lives inside a
 * theme block is a bug — the three theme states are explicit-light,
 * explicit-dark, and system (which stamps nothing and lets the media query rule).
 */

:root,
[data-mi-scope] {
  /* ── L1 PRIMITIVES ─────────────────────────────────────────── */
  --mi-purple-50: #f5f3ff;
  --mi-purple-100: #ede9fe;
  --mi-purple-200: #ddd6fe;
  --mi-purple-300: #c4b5fd;
  --mi-purple-400: #a78bfa;
  --mi-purple-500: #8b5cf6;
  --mi-purple-600: #7c3aed;
  --mi-purple-700: #6d28d9;
  --mi-purple-800: #5b21b6;
  --mi-purple-900: #4c1d95;
  --mi-purple-950: #2e1065;

  --mi-sky-50: #f0f9ff;
  --mi-sky-100: #e0f2fe;
  --mi-sky-300: #7dd3fc;
  --mi-sky-500: #0ea5e9;
  --mi-sky-600: #0284c7;
  --mi-sky-900: #0c4a6e;

  --mi-n-50: #fafaf9;
  --mi-n-100: #f4f4f5;
  --mi-n-200: #e6e7ea;
  --mi-n-300: #d2d5db;
  --mi-n-400: #a8adb9;
  --mi-n-500: #7b8194;
  --mi-n-600: #565d70;
  --mi-n-700: #3a4154;
  --mi-n-800: #232a3b;
  --mi-n-900: #141b29;
  --mi-n-950: #0b1220;

  --mi-dark-bg: #07090f;
  --mi-dark-elev: #0d1018;
  --mi-dark-elev2: #141a26;
  --mi-dark-line: #1f2634;

  --mi-green-500: #10b981;
  --mi-amber-500: #f59e0b;
  --mi-red-500: #ef4444;

  /* ── L2 SEMANTICS — light (default, complete) ──────────────── */
  --mi-bg: var(--mi-n-50);
  --mi-bg-subtle: var(--mi-n-100);
  --mi-surface: #ffffff;
  --mi-surface-2: var(--mi-n-50);
  --mi-surface-inset: var(--mi-n-100);
  --mi-ink: var(--mi-n-950);
  --mi-ink-muted: var(--mi-n-600);
  --mi-ink-faint: var(--mi-n-400);
  --mi-ink-on-accent: #ffffff; /* 5.1:1 on purple-600 — AA */
  --mi-line: var(--mi-n-200);
  --mi-line-strong: var(--mi-n-300);

  --mi-accent: var(--mi-purple-600);
  --mi-accent-hover: var(--mi-purple-700);
  --mi-accent-ink: var(--mi-purple-700); /* accent AS text: 6.3:1 */
  --mi-accent-tint: var(--mi-purple-50);
  --mi-accent-ring: color-mix(in srgb, var(--mi-purple-600) 35%, transparent);
  --mi-secondary: var(--mi-sky-600);
  --mi-secondary-tint: var(--mi-sky-50);

  --mi-success: #059669;
  --mi-success-tint: #ecfdf5;
  --mi-warning: #b45309;
  --mi-warning-tint: #fffbeb;
  --mi-danger: #dc2626;
  --mi-danger-tint: #fef2f2;
  --mi-info: var(--mi-sky-600);
  --mi-info-tint: var(--mi-sky-50);

  --mi-hover: var(--mi-n-100);
  --mi-selected: var(--mi-purple-50);
  --mi-overlay: color-mix(in srgb, var(--mi-n-950) 55%, transparent);

  /* Ledger's own colour language — the domain has semantics, so it gets tokens.
     Colour is NEVER the only carrier: every type also has a glyph and a label. */
  --mi-earn: var(--mi-success);
  --mi-redeem: var(--mi-accent);
  --mi-reverse: var(--mi-warning);
  --mi-expire: var(--mi-n-500);
  --mi-adjust: var(--mi-secondary);
  --mi-pending: var(--mi-purple-400);
  --mi-locked: var(--mi-n-400);

  --mi-qr-referral: var(--mi-purple-600);
  --mi-qr-attribution: var(--mi-sky-500);
  --mi-qr-discount: var(--mi-green-500);
  --mi-qr-utility: #ca8a04;

  /* Glass — consumer register only; the tool register zeroes these. */
  --mi-glass-bg: color-mix(in srgb, #ffffff 62%, transparent);
  --mi-glass-border: color-mix(in srgb, #ffffff 70%, transparent);
  --mi-glass-blur: 16px;

  /* ── L3 REGISTER — consumer (this site) ────────────────────── */
  --mi-radius-sm: 8px;
  --mi-radius-md: 12px;
  --mi-radius-lg: 16px;
  --mi-radius-xl: 20px;
  --mi-radius-2xl: 24px;
  --mi-radius-full: 9999px;
  --mi-control-h: 44px;
  --mi-control-px: 18px;
  --mi-space: 8px;
  --mi-rhythm: 16px;
  --mi-elev-card: 0 1px 2px rgb(11 18 32 / 0.04), 0 8px 24px rgb(11 18 32 / 0.06);
  --mi-elev-raised: 0 2px 4px rgb(11 18 32 / 0.06), 0 16px 40px rgb(11 18 32 / 0.1);
  --mi-motion-fast: 120ms;
  --mi-motion-base: 200ms;
  --mi-motion-slow: 360ms;
  --mi-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Typography. Every number, ID, ledger amount, source_ref and balance uses
     the mono stack with tabular-nums — a ledger column whose digits shift
     between rows is unreadable, and the ledger is this product's core screen. */
  --mi-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mi-font-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', 'Menlo', monospace;
}

/* Dark redefines ONLY the L2 block. Two selectors, one body: the media query
   handles the "system" state (which stamps no attribute), the attribute handles
   an explicit choice so the toggle wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --mi-bg: var(--mi-dark-bg);
    --mi-bg-subtle: var(--mi-dark-elev);
    --mi-surface: var(--mi-dark-elev);
    --mi-surface-2: var(--mi-dark-elev2);
    --mi-surface-inset: var(--mi-dark-bg);
    --mi-ink: var(--mi-n-100);
    --mi-ink-muted: var(--mi-n-400);
    --mi-ink-faint: var(--mi-n-500);
    --mi-line: var(--mi-dark-line);
    --mi-line-strong: var(--mi-n-700);

    --mi-accent: var(--mi-purple-500);
    --mi-accent-hover: var(--mi-purple-400);
    --mi-accent-ink: var(--mi-purple-300);
    --mi-accent-tint: color-mix(in srgb, var(--mi-purple-500) 16%, transparent);
    --mi-accent-ring: color-mix(in srgb, var(--mi-purple-500) 45%, transparent);
    --mi-secondary: var(--mi-sky-300);
    --mi-secondary-tint: color-mix(in srgb, var(--mi-sky-500) 16%, transparent);

    --mi-success: var(--mi-green-500);
    --mi-success-tint: color-mix(in srgb, var(--mi-green-500) 16%, transparent);
    --mi-warning: var(--mi-amber-500);
    --mi-warning-tint: color-mix(in srgb, var(--mi-amber-500) 16%, transparent);
    --mi-danger: var(--mi-red-500);
    --mi-danger-tint: color-mix(in srgb, var(--mi-red-500) 16%, transparent);
    --mi-info: var(--mi-sky-300);
    --mi-info-tint: color-mix(in srgb, var(--mi-sky-500) 16%, transparent);

    --mi-hover: var(--mi-dark-elev2);
    --mi-selected: color-mix(in srgb, var(--mi-purple-500) 20%, transparent);
    --mi-overlay: color-mix(in srgb, #000000 65%, transparent);

    --mi-glass-bg: color-mix(in srgb, var(--mi-dark-elev) 62%, transparent);
    --mi-glass-border: color-mix(in srgb, #ffffff 10%, transparent);
  }
}

:root[data-theme='dark'] {
  --mi-bg: var(--mi-dark-bg);
  --mi-bg-subtle: var(--mi-dark-elev);
  --mi-surface: var(--mi-dark-elev);
  --mi-surface-2: var(--mi-dark-elev2);
  --mi-surface-inset: var(--mi-dark-bg);
  --mi-ink: var(--mi-n-100);
  --mi-ink-muted: var(--mi-n-400);
  --mi-ink-faint: var(--mi-n-500);
  --mi-line: var(--mi-dark-line);
  --mi-line-strong: var(--mi-n-700);

  --mi-accent: var(--mi-purple-500);
  --mi-accent-hover: var(--mi-purple-400);
  --mi-accent-ink: var(--mi-purple-300);
  --mi-accent-tint: color-mix(in srgb, var(--mi-purple-500) 16%, transparent);
  --mi-accent-ring: color-mix(in srgb, var(--mi-purple-500) 45%, transparent);
  --mi-secondary: var(--mi-sky-300);
  --mi-secondary-tint: color-mix(in srgb, var(--mi-sky-500) 16%, transparent);

  --mi-success: var(--mi-green-500);
  --mi-success-tint: color-mix(in srgb, var(--mi-green-500) 16%, transparent);
  --mi-warning: var(--mi-amber-500);
  --mi-warning-tint: color-mix(in srgb, var(--mi-amber-500) 16%, transparent);
  --mi-danger: var(--mi-red-500);
  --mi-danger-tint: color-mix(in srgb, var(--mi-red-500) 16%, transparent);
  --mi-info: var(--mi-sky-300);
  --mi-info-tint: color-mix(in srgb, var(--mi-sky-500) 16%, transparent);

  --mi-hover: var(--mi-dark-elev2);
  --mi-selected: color-mix(in srgb, var(--mi-purple-500) 20%, transparent);
  --mi-overlay: color-mix(in srgb, #000000 65%, transparent);

  --mi-glass-bg: color-mix(in srgb, var(--mi-dark-elev) 62%, transparent);
  --mi-glass-border: color-mix(in srgb, #ffffff 10%, transparent);
}