/* ============================================
   DISTRIBUIDORA — Design Tokens
   ============================================ */

:root {
    /* ---- Background ---- */
    --bg-primary: #09090b;
    --bg-secondary: #0f0f13;
    --bg-elevated: #161620;
    --bg-card: #12121a;
    --bg-card-hover: #1a1a26;
    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-input-focus: rgba(255, 255, 255, 0.07);

    /* ---- Borders ---- */
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-active: rgba(224, 168, 60, 0.35);

    /* ---- Text ---- */
    --text-1: #f4f4f5;
    --text-2: #a1a1aa;
    --text-3: #52525b;
    --text-inv: #09090b;

    /* ---- Accent (Warm Amber) ---- */
    --accent: #e0a83c;
    --accent-hover: #d49a2e;
    --accent-dim: rgba(224, 168, 60, 0.12);
    --accent-glow: rgba(224, 168, 60, 0.06);

    /* ---- Semantic ---- */
    --green: #34d399;
    --green-dim: rgba(52, 211, 153, 0.10);
    --red: #f87171;
    --red-dim: rgba(248, 113, 113, 0.10);
    --yellow: #fbbf24;
    --yellow-dim: rgba(251, 191, 36, 0.10);
    --blue: #60a5fa;
    --blue-dim: rgba(96, 165, 250, 0.10);

    /* ---- Categories ---- */
    --cat-cig: #f87171;
    --cat-cig-dim: rgba(248, 113, 113, 0.10);
    --cat-tab: #fb923c;
    --cat-tab-dim: rgba(251, 146, 60, 0.10);
    --cat-pap: #60a5fa;
    --cat-pap-dim: rgba(96, 165, 250, 0.10);
    --cat-fil: #a78bfa;
    --cat-fil-dim: rgba(167, 139, 250, 0.10);
    --cat-otr: #34d399;
    --cat-otr-dim: rgba(52, 211, 153, 0.10);

    /* ---- WhatsApp ---- */
    --wa: #25d366;
    --wa-dim: rgba(37, 211, 102, 0.10);

    /* ---- Typography ---- */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---- Spacing ---- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;

    /* ---- Radius ---- */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(224, 168, 60, 0.08);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 350ms;

    /* ---- Layout ---- */
    --sidebar-w: 240px;
    --header-h: 56px;

    /* ---- Z ---- */
    --z-sidebar: 100;
    --z-header: 90;
    --z-modal: 200;
    --z-toast: 300;

    /* ==== Aliases (used by JS page templates) ==== */
    --space-xs: var(--s-1);
    --space-sm: var(--s-2);
    --space-md: var(--s-4);
    --space-lg: var(--s-6);
    --space-xl: var(--s-8);
    --space-2xl: var(--s-12);

    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-md: var(--text-md);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);

    --font-weight-normal: var(--fw-normal);
    --font-weight-medium: var(--fw-medium);
    --font-weight-semibold: var(--fw-semibold);
    --font-weight-bold: var(--fw-bold);

    --success: var(--green);
    --danger: var(--red);
    --warning: var(--yellow);
    --info: var(--blue);
    --success-bg: var(--green-dim);
    --danger-bg: var(--red-dim);
    --warning-bg: var(--yellow-dim);
    --info-bg: var(--blue-dim);

    --accent-light: var(--accent-dim);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --border-color: var(--border);
}