/* ============================================================
   Store admin · Tokens
   ------------------------------------------------------------
   Variables base del sistema de diseño del admin de tienda.
   Solo definen valores: no aplican estilos a ningún selector
   más allá de :root, así que se pueden cargar globalmente sin
   afectar visualmente el panel actual.
   Las próximas capas (base, buttons, forms, etc.) consumen
   estas variables desde sus propios archivos.
   ============================================================ */
:root {
    --sa-primary-rgb: 2, 67, 253;
    --sa-primary: rgb(var(--sa-primary-rgb));
    --sa-primary-fg: #ffffff;

    --sa-bg: #f6f6f7;
    --sa-surface: #ffffff;
    --sa-surface-muted: #f7f7f8;
    --sa-surface-hover: #f2f3f5;

    --sa-border: #e5e7eb;
    --sa-border-strong: #d0d5dd;

    --sa-text: #111827;
    --sa-text-soft: #374151;
    --sa-muted: #6b7280;

    --sa-danger: #dc2626;
    --sa-danger-hover: #b91c1c;
    --sa-success: #15803d;
    --sa-warning: #f59e0b;

    --sa-radius-xs: 4px;
    --sa-radius-sm: 6px;
    --sa-radius-md: 8px;
    --sa-radius-lg: 10px;

    --sa-focus-ring: 0 0 0 3px rgba(var(--sa-primary-rgb), 0.12);

    --sa-sidebar-w: 264px;
    --sa-app-gutter: 22px;
    --sa-stack: 16px;

    --sa-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}