/*
 * BlazorMHD.UI — Theme tokens + token bridge (optional, opt-in).
 *
 * Reference this AFTER mhd.css to make the library's accent colors re-brandable
 * through CSS custom properties — without forking and without rebuilding Tailwind:
 *
 *   <link rel="stylesheet" href="_content/BlazorMHD.UI/css/mhd.css" />
 *   <link rel="stylesheet" href="_content/BlazorMHD.UI/css/mhd-theme.css" />
 *
 * Loading this file on its own does NOT change the default look: every bridged
 * value falls back to the exact original Tailwind color, so the defaults are
 * pixel-identical. You opt into a new look by overriding a token in your own CSS:
 *
 *   :root {
 *     --mhd-color-primary: #7c3aed;          // re-brands every primary surface
 *     --mhd-color-primary-hover: #6d28d9;
 *     --mhd-focus-ring: #7c3aed;
 *     --mhd-radius-md: 0.25rem;
 *   }
 *
 * HOW IT WORKS
 * Tailwind v4 emits its palette as CSS variables (e.g. `--color-blue-600`) inside
 * `@layer theme`, and the utility classes the components use resolve those variables
 * at paint time (`background-color: var(--color-blue-600)`). The "bridge" section
 * below re-points those palette variables at the `--mhd-*` tokens. Because it is
 * unlayered, it always wins over `@layer theme`, so a single token override re-colors
 * the filled/outline/ghost/text variants, hover states, focus rings and dark mode of
 * every component at once — no component markup changes required.
 */

/* ── Foundation tokens (surfaces / text) ─────────────────────────────────────
   Not yet bridged to components; provided as a stable, override-friendly base.
   (Radius and accent colors ARE bridged below — see the .mhd-scope block.) */
:root {
    /* ── Surfaces ──────────────────────────────────────────────────────────
       Background/border/text tiers. --mhd-surface-raised is the elevated tier
       (cards, popovers) — defaults to the base surface, override to lift it. */
    --mhd-surface: #ffffff;
    --mhd-surface-muted: #f8fafc;
    --mhd-surface-raised: #ffffff;
    --mhd-border: #e2e8f0;
    --mhd-text: #0f172a;
    --mhd-text-muted: #64748b;
    --mhd-overlay-scrim: rgba(15, 23, 42, 0.5);

    /* ── Typography ────────────────────────────────────────────────────────
       Opt-in scale for consumers that want to theme fonts/sizes coherently.
       Components are unchanged by default; reference these from your own CSS. */
    --mhd-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mhd-font-size-xs: 0.75rem;
    --mhd-font-size-sm: 0.875rem;
    --mhd-font-size-md: 1rem;
    --mhd-font-size-lg: 1.125rem;
    --mhd-line-height-tight: 1.25;
    --mhd-line-height-normal: 1.5;
    --mhd-font-weight-normal: 400;
    --mhd-font-weight-medium: 500;
    --mhd-font-weight-semibold: 600;

    /* ── Spacing scale ─────────────────────────────────────────────────────
       A small, consistent step scale for consumer layouts and overrides. */
    --mhd-space-1: 0.25rem;
    --mhd-space-2: 0.5rem;
    --mhd-space-3: 0.75rem;
    --mhd-space-4: 1rem;
    --mhd-space-5: 1.5rem;
    --mhd-space-6: 2rem;

    /* ── Density ───────────────────────────────────────────────────────────
       Control/row sizing tokens. Defaults are the "comfortable" values; apply
       the .mhd-density-compact modifier (below) to tighten an entire subtree. */
    --mhd-density-control-height-sm: 1.75rem;
    --mhd-density-control-height-md: 2.25rem;
    --mhd-density-control-pad-x: 0.75rem;
    --mhd-density-row-pad-y: 0.5rem;

    /* ── Overlay / stacking (z-index) token scale ──────────────────────────
       The library's floating UI layers through these tokens. Override any of them
       (typically at :root) to re-layer without editing components; the defaults
       preserve the current stacking order.
         --mhd-z-overlay          dropdown/select/date/autocomplete panels, loading
                                  overlay, context-menu scrim
         --mhd-z-dialog-backdrop  dialog backdrop
         --mhd-z-dialog           dialog surface
         --mhd-z-context-menu     right-click / action menu (top of the stack) */
    --mhd-z-overlay: 9999;
    --mhd-z-dialog-backdrop: 9998;
    --mhd-z-dialog: 9999;
    --mhd-z-context-menu: 10000;
}

.dark {
    --mhd-surface: #0f172a;
    --mhd-surface-muted: #1e293b;
    --mhd-surface-raised: #1e293b;
    --mhd-border: #334155;
    --mhd-text: #f8fafc;
    --mhd-text-muted: #94a3b8;
    --mhd-overlay-scrim: rgba(2, 6, 23, 0.6);
}

/* Opt-in density modifier. Add `mhd-density-compact` alongside `mhd-scope` (or on any ancestor)
   to tighten control/row sizing for that subtree. No effect unless applied. */
.mhd-density-compact {
    --mhd-density-control-height-sm: 1.5rem;
    --mhd-density-control-height-md: 1.875rem;
    --mhd-density-control-pad-x: 0.5rem;
    --mhd-density-row-pad-y: 0.25rem;
}

/*
 * ── Accent / state token bridge ─────────────────────────────────────────────
 * Unlayered, so it overrides Tailwind's `@layer theme` palette variables.
 * Fallbacks are the verbatim original Tailwind values → default look is unchanged.
 *
 * Override these `--mhd-*` tokens (typically at :root) to re-brand:
 *   --mhd-color-primary / -hover      primary buttons, active states, links, dark accents
 *   --mhd-focus-ring                  keyboard focus-visible ring
 *   --mhd-color-success / -hover      success buttons & tones
 *   --mhd-color-danger  / -hover      danger / destructive buttons & tones
 *   --mhd-color-warning / -hover      warning buttons & tones
 *   --mhd-color-info    / -hover      info buttons & tones
 */
.mhd-scope {
    /* Primary (Tailwind "blue" scale).
       blue-500 also backs the focus-visible ring and the active drawer item, so it
       resolves to --mhd-focus-ring, then --mhd-color-primary, then the original — that
       way overriding only --mhd-color-primary still shifts the whole accent coherently. */
    --color-blue-500: var(--mhd-focus-ring, var(--mhd-color-primary, oklch(62.3% 0.214 259.815)));
    --color-blue-600: var(--mhd-color-primary,       oklch(54.6% 0.245 262.881));
    --color-blue-700: var(--mhd-color-primary-hover, oklch(48.8% 0.243 264.376));

    /* Success (emerald) */
    --color-emerald-600: var(--mhd-color-success,       oklch(59.6% 0.145 163.225));
    --color-emerald-700: var(--mhd-color-success-hover, oklch(50.8% 0.118 165.612));

    /* Danger (rose) */
    --color-rose-600: var(--mhd-color-danger,       oklch(58.6% 0.253 17.585));
    --color-rose-700: var(--mhd-color-danger-hover, oklch(51.4% 0.222 16.935));

    /* Warning (amber) */
    --color-amber-400: var(--mhd-color-warning,       oklch(82.8% 0.189 84.429));
    --color-amber-500: var(--mhd-color-warning-hover, oklch(76.9% 0.188 70.08));

    /* Info (sky) */
    --color-sky-500: var(--mhd-color-info,       oklch(68.5% 0.169 237.323));
    --color-sky-600: var(--mhd-color-info-hover, oklch(58.8% 0.158 241.966));

    /* Corner radius (rounded-sm/md/lg/xl across cards, buttons, inputs, dialogs…).
       Override --mhd-radius-* to make the whole library rounder or sharper. */
    --radius-sm: var(--mhd-radius-sm, 0.25rem);
    --radius-md: var(--mhd-radius-md, 0.375rem);
    --radius-lg: var(--mhd-radius-lg, 0.5rem);
    --radius-xl: var(--mhd-radius-xl, 0.75rem);
}