/* ============================================
   DESIGN TOKENS — Frontline Construction Group
   ============================================ */

:root {
    /* ---- Core Dark Palette ---- */
    --color-black:          #0A0A0A;
    --color-bg-primary:     #111111;
    --color-bg-secondary:   #1A1A1A;
    --color-bg-tertiary:    #222222;
    --color-bg-elevated:    #2A2A2A;

    /* ---- Accent — Amber/Gold ---- */
    --color-accent:         #D4A843;
    --color-accent-light:   #E8C468;
    --color-accent-dark:    #B8912E;
    --color-accent-subtle:  rgba(212, 168, 67, 0.10);
    --color-accent-glow:    rgba(212, 168, 67, 0.25);

    /* ---- Typography Colors ---- */
    --color-text-primary:   #FFFFFF;
    --color-text-secondary: #B0B0B0;
    --color-text-tertiary:  #707070;
    --color-text-accent:    #D4A843;

    /* ---- Borders & Dividers ---- */
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-hover:   rgba(255, 255, 255, 0.15);
    --color-border-accent:  rgba(212, 168, 67, 0.30);

    /* ---- Functional ---- */
    --color-success:        #4CAF50;
    --color-error:          #E53935;
    --color-overlay:        rgba(10, 10, 10, 0.75);
    --color-overlay-heavy:  rgba(10, 10, 10, 0.85);

    /* ---- Font Families ---- */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* ---- Font Sizes (fluid) ---- */
    --text-xs:      clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm:      clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base:    clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg:      clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --text-xl:      clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl:     clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --text-3xl:     clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --text-4xl:     clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
    --text-5xl:     clamp(3rem, 2rem + 5vw, 5.5rem);

    /* ---- Font Weights ---- */
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    /* ---- Line Heights ---- */
    --leading-tight:    1.1;
    --leading-snug:     1.25;
    --leading-normal:   1.5;
    --leading-relaxed:  1.65;

    /* ---- Letter Spacing ---- */
    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
    --tracking-widest:  0.15em;

    /* ---- Spacing ---- */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.5rem;
    --space-6:   2rem;
    --space-8:   3rem;
    --space-10:  4rem;
    --space-12:  5rem;
    --space-16:  7rem;
    --space-20:  9rem;

    --section-pad-y:  clamp(4rem, 3rem + 5vw, 8rem);
    --section-pad-x:  clamp(1.5rem, 1rem + 3vw, 4rem);

    --container-max:    1280px;
    --container-wide:   1440px;
    --container-narrow: 800px;

    /* ---- Shadows ---- */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.6);
    --shadow-glow:  0 0 20px rgba(212, 168, 67, 0.15);

    /* ---- Border Radius ---- */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-full:  9999px;

    /* ---- Transitions ---- */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-slow:   500ms ease;
    --transition-slower: 800ms cubic-bezier(0.16, 1, 0.3, 1);
}