/* ==========================================================================
   UI KIT — DESIGN TOKENS   (Phase 0.5)
   --------------------------------------------------------------------------
   The base surface/text/brand tokens (--cb-surface, --cb-text, --cb-brand, …)
   and their dark-mode values are owned by admin/layouts/include/theme.blade.php.
   This file only ADDS the scale/semantic tokens the <x-ui.*> components need,
   built on top of those. When the Phase-5 Theme Customizer lands it writes the
   base tokens; these derived ones follow automatically.
   ========================================================================== */

:root {
    /* type */
    --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ui-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* radius */
    --ui-radius-sm: 6px;
    --ui-radius: 10px;
    --ui-radius-lg: 14px;
    --ui-radius-xl: 18px;
    --ui-radius-pill: 999px;

    /* spacing scale (4-based) */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;

    /* elevation */
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --ui-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --ui-shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
    --ui-shadow-lg: 0 12px 32px rgba(17, 17, 38, .14);

    /* semantic — solid + soft bg + readable ink, all derived from the theme */
    --ui-primary: var(--cb-brand, #3b5bdb);
    --ui-primary-soft: var(--cb-brand-soft, #eef2ff);
    --ui-primary-ink: #ffffff;

    --ui-success: #16a34a;
    --ui-success-soft: var(--cb-green-soft, #dcfce7);
    --ui-success-ink: #14532d;

    --ui-danger: #dc2626;
    --ui-danger-soft: var(--cb-red-soft, #fee2e2);
    --ui-danger-ink: #7f1d1d;

    --ui-warning: #d97706;
    --ui-warning-soft: var(--cb-amber-soft, #fef3c7);
    --ui-warning-ink: #78350f;

    --ui-info: #0891b2;
    --ui-info-soft: #cffafe;
    --ui-info-ink: #164e63;

    --ui-neutral-soft: var(--cb-surface-2, #f4f7fb);
    --ui-neutral-ink: var(--cb-text-soft, #64748b);

    /* focus ring */
    --ui-focus: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent);

    /* layering */
    --ui-z-dropdown: 1000;
    --ui-z-sticky: 1020;
    --ui-z-modal-backdrop: 1040;
    --ui-z-modal: 1050;
    --ui-z-toast: 1080;
}

body.dark-mode {
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --ui-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --ui-shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
    --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);

    --ui-success: #4ade80;
    --ui-success-ink: #bbf7d0;
    --ui-danger: #f87171;
    --ui-danger-ink: #fecaca;
    --ui-warning: #fbbf24;
    --ui-warning-ink: #fde68a;
    --ui-info: #38bdf8;
    --ui-info-soft: #0c3f4d;
    --ui-info-ink: #a5f0fc;
}