/* =============================================
   variables.css — Worldwide Exporter
   Design tokens — sab CSS files yahan se consume karti hain.
   Koi bhi color/size change karna ho toh sirf yahan karo.
   ============================================= */

:root {
    /* ── Brand Colors ── */
    --primary:          #892C36;
    --primary-rgb:      137, 44, 54;  /* same as --primary in R,G,B — used for rgba() opacity variants */
    --primary-hover:    #6F1F29;
    --primary-light:    #fdf2f3;
    --primary-tint:     #f1c9cd;
    --primary-alpha-8:  rgba(var(--primary-rgb), 0.08);
    --primary-alpha-12: rgba(var(--primary-rgb), 0.12);
    --primary-alpha-20: rgba(var(--primary-rgb), 0.20);

    /* ── Secondary Color ── */
    --secondary:          #3B82F6;   /* default: complementary blue — change to taste, or via Admin > Settings */
    --secondary-rgb:       59, 130, 246;
    --secondary-hover:    #2563EB;
    --secondary-light:    #eff6ff;
    --secondary-tint:     #bfdbfe;
    --secondary-alpha-8:  rgba(var(--secondary-rgb), 0.08);
    --secondary-alpha-12: rgba(var(--secondary-rgb), 0.12);
    --secondary-alpha-20: rgba(var(--secondary-rgb), 0.20);

    /* ── Accent Color ── */
    --accent:          #F59E0B;   /* default: amber — for highlights/CTAs distinct from primary */
    --accent-rgb:       245, 158, 11;
    --accent-hover:    #D97706;
    --accent-light:    #fffbeb;
    --accent-tint:     #fde68a;
    --accent-alpha-8:  rgba(var(--accent-rgb), 0.08);
    --accent-alpha-12: rgba(var(--accent-rgb), 0.12);
    --accent-alpha-20: rgba(var(--accent-rgb), 0.20);

    /* ── Text Colors ── */
    --text-heading: #111827;
    --text-body:    #374151;
    --text-muted:   #6b7280;
    --text-subtle:  #9ca3af;
    --text-inverse: #ffffff;

    /* ── Background Colors ── */
    --bg:           #f0f2f5;
    --bg-white:     #ffffff;
    --bg-light:     #f8f9fa;
    --bg-card:      #ffffff;
    --bg-overlay:   rgba(17, 24, 39, 0.55);

    /* ── Border Colors ── */
    --border:       #e5e7eb;
    --border-light: #f3f4f6;
    --border-focus: #892C36;

    /* ── Shadows ── */
    --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.07);
    --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl:      0 16px 40px rgba(0, 0, 0, 0.14);
    --shadow-primary: 0 4px 14px rgba(var(--primary-rgb), 0.20);
    --shadow-primary-lg: 0 8px 24px rgba(var(--primary-rgb), 0.25);

    /* ── Border Radius ── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-full: 9999px;

    /* ── Spacing ── */
    --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-15: 60px;

    /* ── Typography ── */
    --font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-xs:   10.5px;
    --text-sm:   12px;
    --text-base: 13.5px;
    --text-md:   14px;
    --text-lg:   16px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;
    --lh-tight:  1.25;
    --lh-snug:   1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --lh-loose:  1.8;

    /* ── Transitions ── */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.20s ease;
    --transition-slow:   all 0.35s ease;
    --transition-spring: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-index ── */
    --z-base:      1;
    --z-above:     10;
    --z-dropdown:  1050;
    --z-sidebar:   300;
    --z-overlay:   200;
    --z-navbar:    998;
    --z-ribbon:    999;
    --z-floating:  1000;
    --z-modal:     9999;

    /* ── Button — Primary (solid) ── */
    --btn-primary-bg:       var(--primary);
    --btn-primary-bg-hover: var(--primary-hover);
    --btn-primary-color:    #ffffff;
    --btn-primary-border:   var(--primary);

    /* ── Button — Outline (ghost) ── */
    --btn-outline-bg:         #ffffff;
    --btn-outline-bg-hover:   var(--primary-light);
    --btn-outline-color:      var(--primary);
    --btn-outline-border:     var(--primary);

    /* ── Button — Ghost (no border) ── */
    --btn-ghost-bg:       transparent;
    --btn-ghost-bg-hover: var(--primary-alpha-8);
    --btn-ghost-color:    var(--primary);

    /* ── Button — Neutral ── */
    --btn-neutral-bg:       #ffffff;
    --btn-neutral-bg-hover: var(--bg-light);
    --btn-neutral-color:    var(--text-muted);
    --btn-neutral-border:   var(--border);

    /* ── Button — Danger ── */
    --btn-danger-bg:       #dc2626;
    --btn-danger-bg-hover: #b91c1c;
    --btn-danger-color:    #ffffff;

    /* ── Button Sizes ── */
    --btn-padding-xs: 3px 10px;
    --btn-padding-sm: 6px 12px;
    --btn-padding-md: 9px 18px;
    --btn-padding-lg: 11px 24px;
    --btn-font-xs:    10.5px;
    --btn-font-sm:    11.5px;
    --btn-font-md:    13px;
    --btn-font-lg:    14px;
    --btn-radius:     var(--radius-md);
    --btn-radius-sm:  var(--radius-sm);
    --btn-fw:         600;
    --btn-transition: var(--transition-base);

    /* ── Card ── */
    --card-bg:      var(--bg-card);
    --card-border:  var(--border);
    --card-radius:  var(--radius-lg);
    --card-shadow:  var(--shadow-sm);
    --card-shadow-hover: var(--shadow-primary);

    /* ── Input ── */
    --input-border:       var(--border);
    --input-border-focus: var(--primary);
    --input-bg:           #ffffff;
    --input-bg-focus:     #ffffff;
    --input-color:        var(--text-heading);
    --input-placeholder:  var(--text-subtle);
    --input-radius:       var(--radius-md);
    --input-padding:      10px 12px;
    --input-font:         0.85rem;
    --input-shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), 0.12);

    /* ── Navbar ── */
    --navbar-height:     60px;
    --navbar-bg:         #ffffff;
    --navbar-shadow:     0 1px 8px rgba(0, 0, 0, 0.08);
    --navbar-z:          var(--z-navbar);

    /* ── Footer ── */
    --footer-bg: linear-gradient(135deg, #0a0a0a 0%, #121212 50%, #232323 100%);

    /* ── Ribbon ── */
    --ribbon-bg:     #1a0a0c;
    --ribbon-border: rgba(var(--primary-rgb), 0.3);

    /* ── Tag / Chip ── */
    --tag-bg:     var(--primary-light);
    --tag-color:  var(--primary);
    --tag-border: var(--primary-tint);
    --tag-radius: var(--radius-full);

    /* ── Scrollbar ── */
    --scrollbar-thumb: var(--primary);
    --scrollbar-track: #f1f1f1;
}