/* ===================== Design Tokens ===================== */
/* Single source of truth for the Garments Mantra shell. layout.css, sidebar.css, navbar.css,
   and this RCL's content-layer CSS (cards/tables/forms/ui-components) all consume these
   --phx-* custom properties. Never hardcode colors, spacing, or radii anywhere else. */

:root {
    /* ---------- Sidebar ---------- */
    --phx-sidebar-bg: #092A34;
    --phx-sidebar-hover: #145D74;
    --phx-sidebar-active: #145D74;

    /* ---------- Brand / semantic colors ---------- */
    --phx-primary: #145D74;
    --phx-bg: #EAF1F2;
    --phx-surface: #F4F9F9;
    --phx-border: #DCE6E6;
    --phx-text: #1F2937;
    --phx-text-muted: #6B7280;

    /* ---------- Shell backdrop (body/content-area behind cards — deliberately distinct from
       --phx-bg, which stays a light inset tint for chips/search fields sitting inside white
       surfaces). Deep teal from the same family as --phx-sidebar-bg, so cards visually float on a
       rich backdrop instead of white. --phx-shell-text/-muted are for the handful of elements that
       render directly on this backdrop with no white surface beneath them (page title/subtitle,
       breadcrumb) — everything else keeps using --phx-text, which stays dark for white surfaces. */
    --phx-shell-bg: #EAE6D3;
    --phx-shell-text: #E9F1F2;
    --phx-shell-text-muted: #A9C4CB;

    --phx-success: #22C55E;
    --phx-warning: #F59E0B;
    --phx-danger: #EF4444;
    --phx-info: #3B82F6;
    --phx-ai: #7C3AED;

    /* Legacy alias — cards.css/tables.css/forms.css/ui-components.css consume --phx-accent */
    --phx-accent: var(--phx-primary);

    /* ---------- Layout dimensions ---------- */
    --phx-sidebar-width-expanded: 280px;
    --phx-sidebar-width-collapsed: 72px;
    --phx-sidebar-width: var(--phx-sidebar-width-expanded);
    --phx-topbar-height: 72px;
    --phx-transition-base: 300ms ease;

    /* ---------- Radius ---------- */
    --phx-radius-sm: 6px;
    --phx-radius-md: 8px;
    --phx-radius-lg: 12px;
    --phx-radius-pill: 999px;

    /* ---------- Shadow ---------- */
    --phx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --phx-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --phx-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

    /* ---------- Spacing scale ---------- */
    --phx-space-1: 4px;
    --phx-space-2: 8px;
    --phx-space-3: 12px;
    --phx-space-4: 16px;
    --phx-space-5: 24px;
    --phx-space-6: 32px;

    /* ---------- Typography ---------- */
    --phx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --phx-font-size-sm: 12.5px;
    --phx-font-size-base: 14px;
    --phx-font-size-lg: 16px;

    /* ---------- Z-index scale ---------- */
    --phx-z-sidebar: 1030;
    --phx-z-topbar: 1010;
    --phx-z-loader: 1050;
    --phx-z-backdrop: 1020;
    --phx-z-blade-backdrop: 1035;
    --phx-z-blade: 1040;
    --phx-z-global-loader: 1060;
}

[data-bs-theme="dark"] {
    --phx-bg: #10141c;
    --phx-surface: #171c26;
    --phx-border: #262d3a;
    --phx-text: #e7eaee;
    --phx-text-muted: #8a97a6;

    --phx-shell-bg: #0a1119;
    --phx-shell-text: #e7eaee;
    --phx-shell-text-muted: #8a97a6;
}