/*
 * webmarket-tokens.css
 * Design-system CSS custom properties for theme_webmarket.
 * Translated from the React component library (webmarket_components).
 * Loaded AFTER the PHP-injected primary/secondary block so these values win.
 */

/* ── Light Mode ──────────────────────────────────────────────── */
:root {

    /* Brand palette */
    --brand-primary:    #FE6A00;
    --brand-secondary:  #FFF4EB;
    --brand-tertiary:   #FEE1CC;
    --brand-100:        #FEC399;
    --brand-200:        #FEA566;
    --brand-700:        #963F00;

    /* Override Bootstrap 5 primary (overrides PHP-injected green) */
    --bs-primary:            #FE6A00;
    --bs-primary-rgb:        254, 106, 0;
    --bs-link-color:         #FE6A00;
    --bs-link-hover-color:   #963F00;
    --bs-link-color-rgb:     254, 106, 0;

    /* Override Bootstrap 5 secondary */
    --bs-secondary:          #FFF4EB;
    --bs-secondary-rgb:      255, 244, 235;

    /* Font — Inter replaces Mulish */
    --bs-body-font-family:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-font-sans-serif:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Body text */
    --bs-body-color:         #262626;

    /* Design-system text tokens */
    --text-primary:          #262626;
    --text-secondary:        #525252;
    --text-tertiary:         #A3A3A3;
    --text-muted:            #404040;

    /* Neutral blue-gray scale */
    --gray-50:  #F8FAFC;
    --gray-100: #F3F4F6;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* Semantic — success (emerald) */
    --success-50:  #ECFDF5;
    --success-100: #D1FAE5;
    --success-500: #10B981;
    --success-600: #059669;
    --success-700: #047857;
    --success:     #10B981;
    --success-bg:  #ECFDF5;

    /* Semantic — danger (red) */
    --danger-50:  #FEF2F2;
    --danger-100: #FEE2E2;
    --danger-500: #EF4444;
    --danger-600: #DC2626;
    --danger-700: #B91C1C;
    --danger:     #EF4444;
    --danger-bg:  #FEF2F2;

    /* Semantic — warning (amber) */
    --warning-50:  #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;
    --warning:     #F59E0B;

    /* Semantic — info (sky) */
    --info-50:  #F0F9FF;
    --info-100: #E0F2FE;
    --info-500: #0EA5E9;
    --info-600: #0284C7;
    --info-700: #0369A1;

    /* Accent — violet */
    --violet-50:  #F5F3FF;
    --violet-100: #EDE9FE;
    --violet-500: #8B5CF6;
    --violet-600: #7C3AED;
    --violet-700: #6D28D9;

    /* Border radius tokens */
    --radius-sm:  0.375rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;
    --radius-xl:  1rem;
    --radius-2xl: 1.5rem;

    /* Override Bootstrap card radius */
    --bs-card-border-radius:       var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);

    /* Legacy aliases kept for compatibility with existing style.css */
    --base:           #FE6A00;
    --web-primary:    #FE6A00;
    --primary-dark:   #963F00;
    --primary-light:  #FFF4EB;
    --web-secondary:  #FFF4EB;
    --web-primary-10: rgba(254, 106, 0, 0.10);
    --web-primary-20: rgba(254, 106, 0, 0.20);
    --web-primary-40: rgba(254, 106, 0, 0.40);

    /* Chart palette */
    --chart-1: #FE6A00;
    --chart-2: #0EA5E9;
    --chart-3: #059669;
    --chart-4: #8B5CF6;
    --chart-5: #F59E0B;
    --chart-6: #F43F5E;
    --chart-7: #06B6D4;
    --chart-8: #65A30D;
}

/* ── Dark Mode ───────────────────────────────────────────────── */
body[theme="dark"] {

    --brand-primary:    #FE6A00;
    --brand-secondary:  #271912;
    --brand-tertiary:   #3D2214;
    --brand-100:        #8A3D0A;
    --brand-200:        #B34A00;
    --brand-700:        #FEA566;

    --bs-primary:            #FE6A00;
    --bs-primary-rgb:        254, 106, 0;
    --bs-secondary:          #271912;
    --bs-secondary-rgb:      39, 25, 18;
    --bs-body-color:         #FAFAFA;
    --bs-link-color:         #FEA566;
    --bs-link-hover-color:   #FEC399;
    --bs-link-color-rgb:     254, 165, 102;

    --text-primary:   #FAFAFA;
    --text-secondary: #D4D4D8;
    --text-tertiary:  #71717A;
    --text-muted:     #A1A1AA;

    --gray-50:  #18181B;
    --gray-100: #1F1F22;
    --gray-200: #27272A;
    --gray-300: #3F3F46;
    --gray-400: #52525B;
    --gray-500: #71717A;
    --gray-600: #A1A1AA;
    --gray-700: #D4D4D8;
    --gray-800: #E4E4E7;
    --gray-900: #FAFAFA;

    --success-50:  #052E1C;
    --success-100: #064E3B;
    --success-700: #6EE7B7;
    --danger-50:   #3B1212;
    --danger-100:  #5B1D1D;
    --danger-700:  #FCA5A5;
    --warning-50:  #2B1D05;
    --warning-100: #44320A;
    --warning-700: #FCD34D;
    --info-50:     #082F49;
    --info-100:    #0C4A6E;
    --info-700:    #7DD3FC;
    --violet-50:   #2E1065;
    --violet-100:  #4C1D95;
    --violet-700:  #C4B5FD;

    --base:          #FE6A00;
    --web-primary:   #FE6A00;
    --primary-dark:  #1A0C06;
    --primary-light: #271912;
    --web-secondary: #271912;

    --chart-1: #FF8833;
    --chart-2: #38BDF8;
    --chart-3: #34D399;
    --chart-4: #A78BFA;
    --chart-5: #FCD34D;
    --chart-6: #FB7185;
    --chart-7: #22D3EE;
    --chart-8: #A3E635;
}

/* ── Global font override ────────────────────────────────────── */
body,
input, button, select, textarea, optgroup {
    font-family: var(--bs-body-font-family);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ── Typography scale ────────────────────────────────────────── */
h1 { font-size: 2.5rem;   line-height: 3rem;    font-weight: 600; }
h2 { font-size: 2rem;     line-height: 2.5rem;  font-weight: 600; }
h3 { font-size: 1.5rem;   line-height: 2rem;    font-weight: 600; }
h4 { font-size: 1.125rem; line-height: 1.5rem;  font-weight: 500; }
h5 { font-size: 1rem;     line-height: 1.5rem;  font-weight: 500; }
h6 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }

/* ── Scrollbars ──────────────────────────────────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }