/**
 * Samraa Unified Design Tokens
 * Shared design token dictionary for ERP (public_html) & Storefront (samraa_shop)
 * Preserves all semantic/status colors untouched.
 */

:root {
    /* --------------------------------------------------------------------------
       1. Core Brand / Accent Family
       -------------------------------------------------------------------------- */
    --accent-burgundy: #5A1835;     /* Primary brand / button color */
    --accent-plum: #3A102F;
    --accent-bright-plum: #74345A;  /* Hover states */
    --accent-berry: #6B2145;
    --accent-soft-plum: #8A486C;
    --accent-gold: #C5A059;
    --accent-black: #0A0A0B;

    /* Primary Gradient */
    --primary-gradient: linear-gradient(135deg, #74345A 0%, #5A1835 55%, #3A102F 100%);

    /* --------------------------------------------------------------------------
       2. Light Theme Tokens
       -------------------------------------------------------------------------- */
    --bg-primary: #F8F6F7;
    --bg-secondary: #F0EBEF;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #F9F5F8;

    --text-primary: #111012;
    --text-secondary: #5B555A;
    --text-muted: #877F85;

    --border-medium: rgba(90, 24, 53, 0.15);

    /* --------------------------------------------------------------------------
       3. Compatibility Aliases (Light) — ERP & Shop Seamless Mapping
       -------------------------------------------------------------------------- */
    --primary-color: var(--accent-burgundy);
    --primary-dark: var(--accent-plum);
    --primary-light: var(--accent-bright-plum);
    --secondary-color: var(--accent-burgundy);
    --primary-rgb: 90, 24, 53;

    /* ERP Mappings */
    --body-bg: var(--bg-primary);
    --card-bg: var(--bg-surface);
    --sidebar-bg: var(--bg-surface);
    --header-bg: var(--bg-surface);
    --border-color: var(--border-medium);
    --border-radius: 12px;
    --shadow-sm: 0 2px 4px rgba(90, 24, 53, 0.05);
    --shadow-md: 0 4px 12px rgba(90, 24, 53, 0.08);
    --shadow-lg: 0 8px 24px rgba(90, 24, 53, 0.12);
    --transition: all 0.3s ease;

    --btn-action-bg: var(--accent-burgundy);
    --btn-action-color: #FFFFFF;
    --btn-action-border: var(--accent-burgundy);

    /* Storefront Mappings */
    --bg-main: var(--bg-primary);
    --bg-elevated: var(--bg-surface-elevated);
    --text-main: var(--text-primary);
    --acc-surface: var(--bg-secondary);
    --acc-border: var(--border-medium);
    --acc-shadow: 0 8px 28px rgba(90, 24, 53, 0.08);
    --acc-shadow-hover: 0 14px 36px rgba(90, 24, 53, 0.14);
    --glass: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   4. Dark Theme Tokens
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary: #080708;
    --bg-secondary: #120B11;
    --bg-surface: #1A1018;
    --bg-surface-elevated: #241722;

    --text-primary: #F5F0F3;
    --text-secondary: #B9ADB4;
    --text-muted: #7A6F76;

    --border-medium: rgba(116, 52, 90, 0.22);
    --accent-gold: #E2C695;

    /* Dark Compatibility Aliases */
    --primary-color: var(--accent-burgundy);
    --primary-dark: var(--accent-plum);
    --primary-light: var(--accent-bright-plum);
    --secondary-color: var(--accent-burgundy);
    --primary-rgb: 90, 24, 53;

    /* ERP Mappings */
    --body-bg: var(--bg-primary);
    --card-bg: var(--bg-surface);
    --sidebar-bg: var(--bg-secondary);
    --header-bg: var(--bg-secondary);
    --border-color: var(--border-medium);
    --input-bg: var(--bg-surface-elevated);
    --hover-surface: rgba(116, 52, 90, 0.18);
    --table-stripe: rgba(255, 255, 255, 0.03);
    --chart-grid: rgba(116, 52, 90, 0.22);
    --chart-text: var(--text-secondary);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);

    --btn-action-bg: var(--accent-bright-plum);
    --btn-action-color: #FFFFFF;
    --btn-action-border: var(--accent-bright-plum);

    /* Storefront Mappings */
    --bg-main: var(--bg-primary);
    --text-main: var(--text-primary);
    --bg-elevated: var(--bg-surface-elevated);
    --acc-surface: var(--bg-secondary);
    --acc-border: var(--border-medium);
    --acc-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    --acc-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.55);
    --glass: rgba(26, 16, 24, 0.85);
}

/* --------------------------------------------------------------------------
   5. Print Media (Always Crisp Clean Light Mode)
   -------------------------------------------------------------------------- */
@media print {
    html[data-theme="dark"] {
        color-scheme: light;
        --bg-primary: #FFFFFF;
        --bg-secondary: #FFFFFF;
        --bg-surface: #FFFFFF;
        --bg-surface-elevated: #FFFFFF;
        --text-primary: #111012;
        --text-secondary: #5B555A;
        --text-muted: #877F85;
        --border-medium: #E5E7EB;
        --body-bg: #FFFFFF;
        --card-bg: #FFFFFF;
        --sidebar-bg: #FFFFFF;
        --header-bg: #FFFFFF;
        --bg-main: #FFFFFF;
        --text-main: #111012;
        --border-color: #E5E7EB;
        --input-bg: #FFFFFF;
        --acc-surface: #FFFFFF;
    }
}