/* ============================================
   HLT SERVICE — CENTRAL THEME CONFIGURATION
   ============================================
   Denne fil er det ENESTE sted du skal ændre for at
   justere farver, typografi, spacing, animationer og
   sidetype-accenter på tværs af hele sitet.

   Ændring her ruller automatisk ud til alle templates,
   hero-varianter, cards, buttons og sektioner.

   Rækkefølge:
   1. Brand tokens (base farver)
   2. Typography tokens
   3. Spacing & layout tokens
   4. Shadow & radius tokens
   5. Animation tokens
   6. Page-type accent system (service, brand, area, blog)
   7. Hero variant tokens
   8. Component overrides
   ============================================ */

/* =============================================
   1. BRAND TOKENS — Hovedfarver
   ============================================= */
:root {
  /* Primary palette */
  --brand-primary:       #003B5C;
  --brand-primary-light: #0A5A8A;
  --brand-primary-dark:  #001F33;
  --brand-primary-rgb:   0, 59, 92;

  /* CTA / accent red */
  --brand-cta:           #E31E24;
  --brand-cta-hover:     #C91A1F;
  --brand-cta-dark:      #A81518;
  --brand-cta-rgb:       227, 30, 36;

  /* Secondary accent (sky blue) */
  --brand-accent:        #0EA5E9;
  --brand-accent-light:  #38BDF8;
  --brand-accent-rgb:    14, 165, 233;

  /* Neutrals */
  --neutral-white:       #FFFFFF;
  --neutral-offwhite:    #F7F8FA;
  --neutral-50:          #F9FAFB;
  --neutral-100:         #F3F4F6;
  --neutral-200:         #E5E7EB;
  --neutral-300:         #D1D5DB;
  --neutral-400:         #9CA3AF;
  --neutral-500:         #6B7280;
  --neutral-600:         #4B5563;
  --neutral-700:         #374151;
  --neutral-800:         #1F2937;
  --neutral-900:         #111827;

  /* Semantic */
  --success:             #10B981;
  --warning:             #F59E0B;
  --error:               #EF4444;
  --info:                #3B82F6;


  /* =============================================
     2. TYPOGRAPHY TOKENS
     ============================================= */
  --font-heading:        'DM Sans', sans-serif;
  --font-body:           'Inter', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;

  /* Font sizes — modulær skala (1.25 ratio) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* Font weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-caps:    0.08em;


  /* =============================================
     3. SPACING & LAYOUT TOKENS
     ============================================= */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  --container-max:   1200px;
  --container-narrow: 800px;
  --container-wide:  1400px;

  --section-padding:       56px;
  --section-padding-mobile: 36px;

  /* Grid */
  --grid-gap:         24px;
  --grid-gap-tight:   16px;
  --grid-gap-loose:   40px;


  /* =============================================
     4. SHADOW & RADIUS TOKENS
     ============================================= */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 25px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 50px -12px rgba(0,0,0,0.15);
  --shadow-2xl: 0 25px 60px -15px rgba(0,0,0,0.2);

  /* Glass-specific shadows */
  --shadow-glass:     0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-glass-hover: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);


  /* =============================================
     5. ANIMATION TOKENS
     ============================================= */
  /* Duration */
  --duration-fast:    0.15s;
  --duration-normal:  0.3s;
  --duration-slow:    0.5s;
  --duration-slower:  0.7s;
  --duration-slowest: 1s;

  /* Easing */
  --ease-default:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:      cubic-bezier(0.5, 0, 0, 1);

  /* Scroll animation distances */
  --anim-distance-up:    40px;
  --anim-distance-side:  50px;
  --anim-scale-from:     0.88;

  /* Stagger base delay */
  --stagger-base: 0.08s;

  /* Hover transforms */
  --hover-lift:       translateY(-6px);
  --hover-lift-small: translateY(-4px);
  --hover-scale:      scale(1.02);


  /* =============================================
     6. PAGE-TYPE ACCENT SYSTEM
     Bruges af inc/theming.php til at sætte
     --page-accent og --page-accent-light pr. side
     ============================================= */

  /* Page accent defaults (overskrives pr. side via inline style) */
  --page-accent:       var(--brand-primary);
  --page-accent-light: var(--brand-primary-light);
  --page-accent-rgb:   var(--brand-primary-rgb);

  /* ── Service categories ── */
  --accent-motor:       #0369A1;   /* Motorservice, olie, filter */
  --accent-motor-light: #0EA5E9;
  --accent-motor-rgb:   3, 105, 161;

  --accent-bremse:       #DC2626;  /* Bremser, sikkerhed */
  --accent-bremse-light: #F87171;
  --accent-bremse-rgb:   220, 38, 38;

  --accent-diesel:       #92400E;  /* Diesel, DPF, turbo */
  --accent-diesel-light: #D97706;
  --accent-diesel-rgb:   146, 64, 14;

  --accent-elektro:      #7C3AED;  /* Elektronik, diagnostik */
  --accent-elektro-light:#A78BFA;
  --accent-elektro-rgb:  124, 58, 237;

  --accent-klima:        #0891B2;  /* Klimaanlæg, komfort */
  --accent-klima-light:  #22D3EE;
  --accent-klima-rgb:    8, 145, 178;

  --accent-elbil:        #059669;  /* Elbil, hybrid, grøn */
  --accent-elbil-light:  #34D399;
  --accent-elbil-rgb:    5, 150, 105;

  --accent-karosseri:    #EA580C;  /* Skadecenter, lak */
  --accent-karosseri-light:#FB923C;
  --accent-karosseri-rgb:234, 88, 12;

  /* ── Brand accents (bilmærke-sider) ── */
  --accent-brand-de:     #1E40AF;  /* Tyske mærker: VW, BMW, Audi, Mercedes, Opel, Porsche */
  --accent-brand-de-light:#3B82F6;
  --accent-brand-de-rgb: 30, 64, 175;

  --accent-brand-jp:     #B91C1C;  /* Japanske: Toyota, Honda, Mazda, Nissan, Mitsubishi, Suzuki */
  --accent-brand-jp-light:#EF4444;
  --accent-brand-jp-rgb: 185, 28, 28;

  --accent-brand-kr:     #0F766E;  /* Koreanske: Hyundai, Kia */
  --accent-brand-kr-light:#14B8A6;
  --accent-brand-kr-rgb: 15, 118, 110;

  --accent-brand-fr:     #6D28D9;  /* Franske: Peugeot, Citroën, Renault */
  --accent-brand-fr-light:#8B5CF6;
  --accent-brand-fr-rgb: 109, 40, 217;

  --accent-brand-se:     #0369A1;  /* Svenske: Volvo */
  --accent-brand-se-light:#0EA5E9;
  --accent-brand-se-rgb: 3, 105, 161;

  --accent-brand-us:     #B45309;  /* Amerikanske: Ford, Tesla, Jeep */
  --accent-brand-us-light:#F59E0B;
  --accent-brand-us-rgb: 180, 83, 9;

  --accent-brand-it:     #DC2626;  /* Italienske: Fiat, Alfa Romeo */
  --accent-brand-it-light:#F87171;
  --accent-brand-it-rgb: 220, 38, 38;

  --accent-brand-gb:     #065F46;  /* Britiske: Land Rover, Mini, Jaguar */
  --accent-brand-gb-light:#10B981;
  --accent-brand-gb-rgb: 6, 95, 70;

  --accent-brand-cz:     #78350F;  /* Tjekkiske: Skoda */
  --accent-brand-cz-light:#D97706;
  --accent-brand-cz-rgb: 120, 53, 15;

  /* ── Area page accents ── */
  --accent-area:         #047857;  /* Grøn / lokal / natur */
  --accent-area-light:   #34D399;
  --accent-area-rgb:     4, 120, 87;

  /* ── Blog accent ── */
  --accent-blog:         #DC2626;
  --accent-blog-light:   #F87171;
  --accent-blog-rgb:     220, 38, 38;


  /* =============================================
     7. HERO VARIANT TOKENS
     ============================================= */

  /* Hero A: Cinematic Dark (services) */
  --hero-a-min-height:    420px;
  --hero-a-overlay:       linear-gradient(135deg, rgba(0,30,50,0.7) 0%, rgba(0,20,40,0.6) 100%);
  --hero-a-title-size:    var(--text-5xl);
  --hero-a-orb-color:     rgba(var(--page-accent-rgb), 0.06);

  /* Hero B: Split Dark (brand pages) */
  --hero-b-min-height:    460px;
  --hero-b-bg:            var(--brand-primary);
  --hero-b-columns:       1fr 1fr;
  --hero-b-gap:           60px;
  --hero-b-title-size:    var(--text-4xl);

  /* Hero C: Brand Hero med logo (bilmærke) */
  --hero-c-logo-height:   56px;
  --hero-c-title-size:    var(--text-4xl);
  --hero-c-accent-bar:    4px;

  /* Hero D: Map / Distance (område) */
  --hero-d-min-height:    420px;
  --hero-d-bg:            linear-gradient(135deg, #003B5C, #00543E);
  --hero-d-title-size:    var(--text-4xl);

  /* Hero E: Minimal / Light (blog, generisk) */
  --hero-e-bg:            var(--neutral-offwhite);
  --hero-e-border:        1px solid var(--neutral-200);
  --hero-e-title-size:    var(--text-4xl);
  --hero-e-title-color:   var(--neutral-900);


  /* =============================================
     8. COMPONENT TOKENS
     ============================================= */

  /* FAQ accordion */
  --faq-border:       var(--neutral-200);
  --faq-hover-bg:     var(--neutral-50);
  --faq-marker-color: var(--page-accent);
  --faq-padding:      20px;

  /* Expert card */
  --expert-card-bg:        var(--neutral-white);
  --expert-card-border:    var(--neutral-200);
  --expert-card-shadow:    var(--shadow-md);
  --expert-avatar-size:    80px;

  /* Price card */
  --price-accent:     var(--page-accent);
  --price-bg:         var(--neutral-white);
  --price-border:     var(--neutral-200);

  /* Trust badges */
  --trust-bg:          var(--neutral-50);
  --trust-border:      var(--neutral-200);

  /* CTA bottom section */
  --cta-bottom-bg:     linear-gradient(135deg, var(--neutral-offwhite), var(--neutral-100));
  --cta-bottom-orb:    rgba(var(--brand-accent-rgb), 0.04);

  /* Sidebar */
  --sidebar-width:     360px;
  --sidebar-gap:       48px;

  /* Navigation */
  --nav-bg:            rgba(255,255,255,0.8);
  --nav-blur:          20px;
  --nav-border:        rgba(0,0,0,0.06);
  --nav-height:        72px;
  --nav-dropdown-bg:   rgba(255,255,255,0.95);
  --nav-dropdown-blur: 30px;
}


/* =============================================
   DARK SECTION OVERRIDES
   Automatisk farve-flip for .section-dark
   ============================================= */
.section-dark {
  --page-accent:       var(--brand-accent);
  --page-accent-light: var(--brand-accent-light);
  --faq-border:        rgba(255,255,255,0.12);
  --faq-hover-bg:      rgba(255,255,255,0.05);
  --expert-card-bg:    rgba(255,255,255,0.06);
  --expert-card-border:rgba(255,255,255,0.1);
  --price-bg:          rgba(255,255,255,0.06);
  --price-border:      rgba(255,255,255,0.1);
  --trust-bg:          rgba(255,255,255,0.06);
  --trust-border:      rgba(255,255,255,0.1);
}


/* =============================================
   REDUCED MOTION — Global override
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0s;
    --duration-normal:  0s;
    --duration-slow:    0s;
    --duration-slower:  0s;
    --duration-slowest: 0s;
    --anim-distance-up:   0px;
    --anim-distance-side: 0px;
    --anim-scale-from:    1;
  }
}


/* =============================================
   PRINT — Strip heavy effects
   ============================================= */
@media print {
  :root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
  }
}