/* UKFuelPrices.uk — design tokens (Featured Palette: Navy + Blue + Teal + Coral) */

:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:        #F1F5F9;
  --bg-2:      #E2E8F0;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #F1F5F9;
  --line:      #E2E8F0;
  --line-2:    #CBD5E1;
  --text:      #0F172A;
  --text-2:    #475569;
  --text-3:    #64748B;
  --muted:     #64748B;

  --brand:      #2563EB;
  --brand-2:    #1D4ED8;
  --brand-ink:  #FFFFFF;
  --brand-soft: #EFF6FF;
  --brand-wash: #DBEAFE;
  --brand-accent: #0D9488;

  --teal:       #14B8A6;
  --teal-dark:  #0D9488;
  --teal-soft:  #F0FDFA;

  --coral:      #F97316;
  --coral-soft: #FFF7ED;

  --good:      #059669;
  --good-soft: #ECFDF5;
  --warn:      #F97316;
  --warn-soft: #FFF7ED;
  --bad:       #DC2626;
  --bad-soft:  #FEE2E2;

  --maps:      #2563EB;
  --waze:      #00A8E8;

  --fuel-e10:  #16A34A;
  --fuel-e5:   #D97706;
  --fuel-b7s:  #1e293b;
  --fuel-b7p:  #B45309;
  --fuel-b10:  #0D9488;
  --fuel-hvo:  #2563EB;

  --nav-btn:   #007489;
  --nav-btn-ink: #FFFFFF;

  --chip:      #F1F5F9;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm:     0 1px 2px rgba(15,23,42,.05);
  --shadow-1:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-2:  0 10px 25px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --map-bg:    #E9EBE5;
  --map-road:  #C9CFC6;
  --map-trunk: #9AA79B;
  --map-mway:  #5E86C0;
  --map-label: #475569;
  --map-label-halo: #FFFFFF;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #080C14;
  --bg-2:      #0F172A;
  --surface:   #0F172A;
  --surface-2: #1E293B;
  --surface-3: #334155;
  --line:      #1E293B;
  --line-2:    #334155;
  --text:      #F8FAFC;
  --text-2:    #94A3B8;
  --text-3:    #64748B;
  --muted:     #64748B;

  --brand:      #3B82F6;
  --brand-2:    #60A5FA;
  --brand-ink:  #0F172A;
  --brand-soft: #1E293B;
  --brand-wash: #172554;
  --brand-accent: #2DD4BF;

  --teal:       #2DD4BF;
  --teal-dark:  #14B8A6;
  --teal-soft:  #042F2E;

  --coral:      #FB923C;
  --coral-soft: #381A08;

  --good:      #34D399;
  --good-soft: #064E3B;
  --warn:      #FB923C;
  --warn-soft: #381A08;
  --bad:       #F87171;
  --bad-soft:  #381212;

  --maps:      #60A5FA;
  --waze:      #33CCFF;

  --fuel-e10:  #4ADE80;
  --fuel-e5:   #FBBF24;
  --fuel-b7s:  #CBD5E1;
  --fuel-b7p:  #FB923C;
  --fuel-b10:  #2DD4BF;
  --fuel-hvo:  #60A5FA;

  --nav-btn:   #0D9488;
  --nav-btn-ink: #FFFFFF;

  --chip:      #1E293B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow-1:  0 1px 3px rgba(0,0,0,.5);
  --shadow-2:  0 12px 30px rgba(0,0,0,.6);
  --map-bg:    #080D15;
  --map-road:  #1E2838;
  --map-trunk: #2B3B52;
  --map-mway:  #3E6FA8;
  --map-label: #94A3B8;
  --map-label-halo: #080C14;
}

/* Alternative price colours use the UKFuelPrices blue and a readable orange. */
[data-colorblind="true"],
[data-colorblind="true"][data-theme="light"] {
  --good:      var(--brand);
  --good-soft: var(--brand-soft);
  --warn:      #D97706;
  --warn-soft: #FEF3C7;
  --bad:       #C2410C;
  --bad-soft:  #FFEDD5;
  --fuel-e10:  var(--brand);
  --fuel-e5:   #D97706;
}

[data-colorblind="true"][data-theme="dark"] {
  --good:      var(--brand);
  --good-soft: var(--brand-soft);
  --warn:      #FBBF24;
  --warn-soft: #451A03;
  --bad:       #FB923C;
  --bad-soft:  #431407;
  --fuel-e10:  var(--brand);
  --fuel-e5:   #FBBF24;
}

/* High contrast mode: stronger outlines, prominent borders */
[data-contrast="high"],
[data-contrast="high"][data-theme="light"] {
  --line:      #64748B;
  --line-2:    #475569;
  --text:      #000000;
  --text-2:    #1E293B;
  --text-3:    #334155;
  --muted:     #334155;
  --shadow-sm: 0 0 0 1px #475569;
  --shadow-1:  0 0 0 1.5px #475569;
  --shadow-2:  0 0 0 2px #334155, 0 12px 30px rgba(0,0,0,.15);
}

[data-contrast="high"][data-theme="dark"] {
  --line:      #64748B;
  --line-2:    #94A3B8;
  --text:      #FFFFFF;
  --text-2:    #F1F5F9;
  --text-3:    #CBD5E1;
  --muted:     #CBD5E1;
  --shadow-sm: 0 0 0 1px #94A3B8;
  --shadow-1:  0 0 0 1.5px #94A3B8;
  --shadow-2:  0 0 0 2px #CBD5E1, 0 12px 30px rgba(0,0,0,.6);
}

:root {
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Aliases to prevent undefined variable breakage in both app and static templates */
  --sans: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --ui:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  --dock-h: 128px;
  --topbar-h: 60px;
  --pane-w: 428px;
}