/* =============================================
   variables.css — Design System
   
   SPACING SCALE (4px base, used everywhere):
     --s-1 = 4px    --s-2 = 8px    --s-3 = 12px
     --s-4 = 16px   --s-5 = 20px   --s-6 = 24px
     --s-8 = 32px   --s-10 = 40px  --s-12 = 48px
     --s-16 = 64px  --s-20 = 80px  --s-24 = 96px
   
   USE THESE EVERYWHERE for padding, margin, gap
   ============================================= */

:root {
    /* Brand */
    --orange:      #FF6B35;
    --orange-dark: #e55d2a;
    --orange-glow: rgba(255,107,53,0.18);
    --orange-soft: rgba(255,107,53,0.08);

    /* Light theme */
    --bg:         #ffffff;
    --bg2:        #f9fafb;
    --card-bg:    #ffffff;
    --text:       #1E1E1E;
    --text-muted: #626462;
    --border:     #E5E7EB;
    --header-bg:  rgba(255,255,255,0.96);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg:  0 12px 32px rgba(0,0,0,0.12);

    /* Type */
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'DM Serif Display', Georgia, serif;

    /* SPACING SCALE */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;

    /* Section padding (vertical breathing room between sections) */
    --section-pad: var(--s-16);

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    /* Transitions */
    --t: 0.25s ease;
}

[data-theme="dark"] {
    --bg:         #0e0e0e;
    --bg2:        #161616;
    --card-bg:    #1c1c1c;
    --text:       #f0f0f0;
    --text-muted: #888;
    --border:     #2a2a2a;
    --header-bg:  rgba(14,14,14,0.96);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:  0 12px 32px rgba(0,0,0,0.6);
}