/*
 * White & Blue design system: tokens
 * ─────────────────────────────────────────────────────────────
 * The single source of colour, radius, shadow and type values for the
 * storefront (layouts/storefront) and the admin panel (layouts/admin).
 * Change a value here and both apps follow. Do not hard-code these colours
 * in views; use the variables (or the Tailwind `ds-*` colours that map to them).
 */
:root {
    /* Surfaces */
    --ds-bg: #FFFFFF;              /* Primary background (cards, header) */
    --ds-bg-subtle: #F8FAFC;       /* Secondary background (page) */

    /* Brand */
    --ds-primary: #2563EB;         /* Primary blue: buttons, links, focus */
    --ds-primary-hover: #1D4ED8;   /* Primary blue hover / pressed */
    --ds-primary-soft: #EFF6FF;    /* Light blue: selected states, highlights */
    --ds-primary-border: #DBEAFE;  /* Soft blue border: selected outlines */

    /* Neutrals */
    --ds-border: #E2E8F0;          /* Standard border */
    --ds-text: #0F172A;            /* Primary text */
    --ds-text-muted: #64748B;      /* Secondary text */

    /* Status */
    --ds-success: #16A34A;
    --ds-success-soft: #F0FDF4;
    --ds-error: #DC2626;
    --ds-error-soft: #FEF2F2;
    /* Extension for "low stock" / "pending" states only. */
    --ds-warning: #B45309;
    --ds-warning-soft: #FFFBEB;

    /* Shape */
    --ds-radius-sm: 8px;
    --ds-radius: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-pill: 999px;

    /* Elevation: restrained, slate-tinted */
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ds-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ds-shadow-md: 0 10px 24px -12px rgba(15, 23, 42, 0.18);
    --ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

    /* Type */
    --ds-font: 'Inter', 'Kantumruy Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ds-font-khmer: 'Kantumruy Pro', 'Inter', system-ui, sans-serif;

    /* Layout */
    --ds-container: 1280px;
    --ds-header-height: 64px;
}