/**
 * Red Beard Peptides — Design Tokens
 * Single source of truth for colors, spacing, typography, and radii.
 *
 * Loaded BEFORE every other stylesheet so :root declarations elsewhere
 * can override / extend without redeclaring the canonical palette.
 *
 * Phase 7 of the modernization plan.
 */

:root {
    /* ============================================================
       BRAND PALETTE
       ============================================================ */
    --primary:                #c0392b;   /* brand red */
    --primary-dark:           #962d22;
    --primary-light:          #e74c3c;
    --gold:                   #d4a843;
    --success:                #27ae60;

    /* Status accent colors (used in admin order pipeline + UI badges) */
    --status-pending:         #f59e0b;
    --status-payment:         #eab308;
    --status-shipped:         #3b82f6;
    --status-completed:       #22c55e;

    /* ============================================================
       SURFACES (dark theme — site default)
       ============================================================ */
    --bg-dark:                #111214;   /* page background */
    --bg-card:                #1a1b1e;   /* cards, panels */
    --bg-surface:             #222326;   /* secondary surface */
    --bg-elevated:            #2a2b2f;   /* hover/elevated state */
    --bg-page:                #0a0a0a;   /* admin page bg, deeper than --bg-dark */

    /* ============================================================
       TEXT
       ============================================================ */
    --text-primary:           #f0f0f0;
    --text-secondary:         #a0a3a8;
    --text-muted:             #6b6e73;

    /* ============================================================
       BORDERS
       ============================================================ */
    --border:                 #2e3035;
    --border-hover:           #3e4045;

    /* ============================================================
       RADII
       ============================================================ */
    --radius-sm:              6px;
    --radius-md:              10px;
    --radius-lg:              16px;
    --radius-pill:            999px;

    /* ============================================================
       SPACING SCALE (4px increments)
       ============================================================ */
    --space-1:                4px;
    --space-2:                8px;
    --space-3:                12px;
    --space-4:                16px;
    --space-5:                20px;
    --space-6:                24px;
    --space-8:                32px;
    --space-10:               40px;
    --space-12:               48px;
    --space-16:               64px;

    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    --font-sans:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:              ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* ============================================================
       SHADOWS
       ============================================================ */
    --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:              0 12px 32px rgba(0, 0, 0, 0.5);

    /* ============================================================
       Z-INDEX SCALE
       ============================================================ */
    --z-dropdown:             100;
    --z-sticky:               200;
    --z-modal:                1000;
    --z-toast:                1100;
}