/**
 * Judge Haulage - CSS Design Token System
 * Premium transport brand: deep navy, charcoal, hot orange accent.
 */
:root {
    /* ── Core Brand Palette ─────────────────────────────────── */
    --color-primary-dark:   #08152B;    /* Deepest ink navy */
    --color-primary-deep:   #0A1E38;    /* Hero / header base */
    --color-primary-medium: #112240;    /* Card backgrounds */
    --color-primary-light:  #1A3354;    /* Subtle elevated surfaces */
    --color-primary-border: rgba(255,255,255,0.07);

    --color-accent:         #FF6200;    /* Vivid transport orange */
    --color-accent-light:   #FF8C42;    /* Softer orange for text use */
    --color-accent-hover:   #E05500;    /* Pressed state */
    --color-accent-glow:    rgba(255,98,0,0.25);    /* Glow ring */
    --color-accent-subtle:  rgba(255,98,0,0.08);    /* Tinted surface */

    /* ── Text ───────────────────────────────────────────────── */
    --color-text-dark:      #0F1F35;
    --color-text-medium:    #4A6080;
    --color-text-light:     #8BA3BF;
    --color-text-muted:     #647a91;
    --color-white:          #FFFFFF;

    /* ── Light-Mode Backgrounds ─────────────────────────────── */
    --color-bg-white:       #FFFFFF;
    --color-bg-light:       #F7F9FC;
    --color-bg-gray:        #EEF2F7;
    --color-bg-gray-dark:   #E2E8F0;

    /* ── Status ─────────────────────────────────────────────── */
    --color-success:        #10B981;
    --color-success-hover:  #059669;
    --color-success-glow:   rgba(16,185,129,0.25);
    --color-danger:         #EF4444;

    /* ── Typography ─────────────────────────────────────────── */
    --font-primary:  'Manrope', system-ui, sans-serif;
    --font-heading:  'Marcellus', Georgia, serif;

    /* ── Spacing ────────────────────────────────────────────── */
    --space-xs:   0.25rem;   /*  4px */
    --space-sm:   0.5rem;    /*  8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2.5rem;    /* 40px */
    --space-xxl:  4.5rem;    /* 72px */

    /* ── Borders & Radius ───────────────────────────────────── */
    --border-radius-xs: 3px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:    0 6px 18px rgba(0,0,0,0.10);
    --shadow-lg:    0 16px 40px rgba(0,0,0,0.13);
    --shadow-xl:    0 28px 60px rgba(0,0,0,0.18);
    --shadow-accent: 0 8px 30px rgba(255,98,0,0.30);
    --shadow-dark:   0 8px 32px rgba(8,21,43,0.45);

    /* ── Gradients ───────────────────────────────────────────── */
    --grad-dark:    linear-gradient(160deg, #0A1E38 0%, #08152B 100%);
    --grad-accent:  linear-gradient(135deg, #FF6200 0%, #E05500 100%);
    --grad-card:    linear-gradient(145deg, #112240 0%, #0A1E38 100%);
    --grad-hero:    linear-gradient(110deg, #08152B 52%, #0d1f3a 100%);
    --grad-cta:     linear-gradient(120deg, #0A1E38 0%, #112240 50%, #0A1E38 100%);

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast:   0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow:   0.45s cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Layout ──────────────────────────────────────────────── */
    --container-max-width: 1220px;
    --header-height:       76px;
}