/*
 * Mayalu design tokens — single source of truth for color, spacing, radius,
 * shadow and typography.
 *
 * The palette/radius/shadow scale here is dashboard.php's — it's the most
 * recently designed page and closest to the Stripe/Linear look this project
 * is targeting. Older pages (orders.php, customers.php, ...) currently use
 * a warmer, looser palette; they migrate toward these values as each page
 * goes through its Phase 4 pass, not all at once.
 */
:root {
    /* Color — brand palette */
    --color-primary: #006fbb;
    --color-primary-dark: #005a96;
    --color-accent: #fbc100;
    --color-success: #61bf33;
    --color-success-dark: #4a9427;
    --color-success-bg: #eaf7e2;
    --color-warning: #e96b1a;
    --color-warning-bg: #fdecdf;
    --color-danger: #df1919;
    --color-danger-bg: #fbe0e0;
    --color-info: #009cdf;
    --color-info-bg: #e0f3fc;

    --color-background: #eef1f3;
    --color-surface: #ffffff;
    --color-border: #d7d7d7;

    --color-text-primary: #21262c;
    --color-text-secondary: #7f90a4;
    --color-text-muted: #a8b2bd;

    /* Spacing (8px grid) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;

    /* Radius — shared by buttons, inputs, cards, dialogs, dropdowns */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Shadow — the only three elevations */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Typography */
    --font-body: 'Inter', 'Mukta', 'Tiro Devanagari Hindi', system-ui, sans-serif;

    /* Nav chrome — sidebar/navbar surface, distinct slate scale from body
       text tokens above. Values are the ones already hardcoded across
       partials/sidebar.css, extracted here rather than invented. */
    --nav-surface: rgba(255, 255, 255, .92);
    --nav-border: #d7d7d7;
    --nav-heading: #21262c;
    --nav-link-hover-bg: #eef1f3;
    --nav-link-hover-text: #21262c;
    --nav-active-bg: #e0f3fc;
    --nav-overlay: rgba(33, 38, 44, .35);

    /* Status taxonomy — single source of truth for what a status color means.
       Used by badges.css. Order/payment states map onto the existing
       success/warning/danger/info/primary tokens above rather than
       inventing a new palette. */
    --status-paid-bg: var(--color-success-bg);
    --status-paid-text: var(--color-success-dark);
    --status-pending-bg: var(--color-warning-bg);
    --status-pending-text: var(--color-warning);
    --status-partial-bg: var(--color-info-bg);
    --status-partial-text: var(--color-info);
    --status-cancelled-bg: var(--color-danger-bg);
    --status-cancelled-text: var(--color-danger);
    --status-open-bg: var(--color-info-bg);
    --status-open-text: var(--color-primary-dark);

    /* Transition — the only easing/duration pair shared components use */
    --transition-fast: .15s cubic-bezier(.4,0,.2,1);
    --transition-base: .25s cubic-bezier(.4,0,.2,1);
}