/**
 * Drop Taxi TN — Brand color palette
 * Source: 4-swatch board (peach · sage/rose · earth · pastel)
 * Change swatch values here to retheme the entire site.
 */
:root {
  /* ── Group 1: Warm peach ── */
  --dttn-sw-peach: #FA9C83;
  --dttn-sw-peach-light: #FDB99B;
  --dttn-sw-peach-cream: #FEE4B3;
  --dttn-sw-peach-pale: #FFF4D1;

  /* ── Group 2: Sage & rose (core UI) ── */
  --dttn-sw-sage: #B8D8C0;
  --dttn-sw-mint: #E6F2EB;
  --dttn-sw-cream: #F6F4E8;
  --dttn-sw-rose: #D19592;

  /* ── Group 3: Earth tan ── */
  --dttn-sw-brown: #A0785A;
  --dttn-sw-ochre: #D99E60;
  --dttn-sw-sand: #F2D9A7;
  --dttn-sw-pistachio: #E3F0D1;

  /* ── Group 4: Soft pastels ── */
  --dttn-sw-pink: #F9B7D3;
  --dttn-sw-sky: #D1EAF0;
  --dttn-sw-pastel-mint: #D1F0D7;
  --dttn-sw-pastel-yellow: #F7FBD5;

  /* ── Semantic: brand roles (reference yellow UI) ── */
  --dttn-ref-yellow: #F9A825;
  --dttn-primary: var(--dttn-ref-yellow);
  --dttn-primary-dark: #e89612;
  --dttn-primary-soft: #fff8e8;

  --dttn-secondary: #2d2d2d;
  --dttn-secondary-dark: #1c1c1c;

  --dttn-accent: var(--dttn-ref-yellow);
  --dttn-accent-dark: #e89612;
  --dttn-accent-soft: #fff3d6;
  --dttn-accent-alt: #FBB03B;

  /* ── Surfaces ── */
  --dttn-bg: #f7f7f7;
  --dttn-surface: var(--dttn-sw-mint);
  --dttn-surface-2: var(--dttn-sw-pistachio);
  --dttn-card-bg: var(--dttn-sw-mint);
  --dttn-section-bg: var(--dttn-sw-cream);
  --dttn-white: #ffffff;

  /* ── Typography colors ── */
  --dttn-ink: var(--dttn-sw-brown);
  --dttn-muted: color-mix(in srgb, var(--dttn-sw-brown) 62%, var(--dttn-sw-sage) 38%);
  --dttn-text-inverse: var(--dttn-sw-cream);
  --dttn-text-soft: var(--dttn-muted);

  /* ── Borders & dividers ── */
  --dttn-border: color-mix(in srgb, var(--dttn-sw-sage) 50%, var(--dttn-sw-cream) 50%);
  --dttn-border-strong: color-mix(in srgb, var(--dttn-sw-sage) 65%, var(--dttn-sw-brown) 35%);
  --dttn-border-muted: color-mix(in srgb, var(--dttn-sw-sage) 35%, var(--dttn-sw-mint) 65%);

  /* ── Footer & CTA accents ── */
  --dttn-orange: var(--dttn-sw-ochre);
  --dttn-orange-dark: color-mix(in srgb, var(--dttn-sw-ochre) 84%, var(--dttn-sw-brown) 16%);
  --dttn-footer-dark: color-mix(in srgb, var(--dttn-sw-brown) 88%, var(--dttn-sw-sage) 12%);

  /* ── Dark chrome (header & footer) ── */
  --dttn-chrome-bg: color-mix(in srgb, var(--dttn-sw-brown) 84%, var(--dttn-sw-sage) 16%);
  --dttn-chrome-bg-deep: color-mix(in srgb, var(--dttn-sw-brown) 94%, black 6%);
  --dttn-chrome-text: var(--dttn-sw-cream);
  --dttn-chrome-text-muted: color-mix(in srgb, var(--dttn-sw-cream) 58%, var(--dttn-sw-sage) 42%);
  --dttn-chrome-border: color-mix(in srgb, var(--dttn-sw-sage) 22%, var(--dttn-sw-brown) 78%);
  --dttn-chrome-hover-bg: color-mix(in srgb, var(--dttn-sw-sage) 14%, var(--dttn-chrome-bg) 86%);
  --dttn-chrome-accent: var(--dttn-ref-yellow, #F9A825);
  --dttn-chrome-accent-soft: color-mix(in srgb, var(--dttn-sw-ochre) 22%, var(--dttn-chrome-bg) 78%);
  --dttn-chrome-input-bg: color-mix(in srgb, var(--dttn-sw-brown) 72%, var(--dttn-sw-sage) 28%);
  --dttn-chrome-input-text: var(--dttn-sw-cream);
  --dttn-chrome-input-placeholder: color-mix(in srgb, var(--dttn-sw-cream) 42%, var(--dttn-sw-sage) 58%);
  --dttn-chrome-shadow: 0 4px 24px color-mix(in srgb, var(--dttn-sw-brown) 35%, transparent);

  /* ── Gradients ── */
  --dttn-gradient-hero: linear-gradient(
    135deg,
    var(--dttn-sw-mint) 0%,
    var(--dttn-sw-cream) 48%,
    var(--dttn-sw-pistachio) 100%
  );
  --dttn-gradient-hero-overlay: linear-gradient(
    105deg,
    color-mix(in srgb, var(--dttn-sw-cream) 92%, white) 0%,
    color-mix(in srgb, var(--dttn-sw-cream) 80%, white) 38%,
    color-mix(in srgb, var(--dttn-sw-mint) 42%, white) 68%,
    color-mix(in srgb, var(--dttn-sw-pistachio) 22%, white) 100%
  );
  --dttn-gradient-hero-glow: radial-gradient(
    ellipse 55% 80% at 88% 50%,
    color-mix(in srgb, var(--dttn-sw-sage) 22%, transparent),
    transparent 70%
  );
  --dttn-gradient-headline: linear-gradient(135deg, var(--dttn-sw-brown), var(--dttn-sw-sage));
  --dttn-gradient-logo: linear-gradient(135deg, var(--dttn-sw-ochre), var(--dttn-sw-sage));
  --dttn-gradient-cta: linear-gradient(
    135deg,
    var(--dttn-sw-brown) 0%,
    color-mix(in srgb, var(--dttn-sw-brown) 68%, var(--dttn-sw-sage) 32%) 100%
  );
  --dttn-gradient-divider-v: linear-gradient(
    180deg,
    var(--dttn-sw-peach-cream) 0%,
    var(--dttn-sw-ochre) 45%,
    var(--dttn-sw-rose) 100%
  );
  --dttn-gradient-divider-h: linear-gradient(
    90deg,
    var(--dttn-sw-peach-cream) 0%,
    var(--dttn-sw-ochre) 50%,
    var(--dttn-sw-rose) 100%
  );
  --dttn-gradient-travel-overlay: linear-gradient(
    to top,
    color-mix(in srgb, var(--dttn-sw-brown) 90%, var(--dttn-sw-sage) 10%) 0%,
    color-mix(in srgb, var(--dttn-sw-brown) 52%, transparent) 38%,
    color-mix(in srgb, var(--dttn-sw-brown) 12%, transparent) 68%,
    transparent 100%
  );

  /* ── Shadows (palette-tinted) ── */
  --dttn-shadow-color: color-mix(in srgb, var(--dttn-sw-brown) 16%, transparent);
  --dttn-shadow: 0 20px 50px var(--dttn-shadow-color);
  --dttn-shadow-sm: 0 4px 20px color-mix(in srgb, var(--dttn-sw-brown) 9%, transparent);
  --dttn-shadow-primary: 0 8px 22px color-mix(in srgb, var(--dttn-sw-brown) 26%, transparent);
  --dttn-shadow-primary-hover: 0 12px 28px color-mix(in srgb, var(--dttn-sw-brown) 30%, transparent);
  --dttn-shadow-btn: 0 4px 14px color-mix(in srgb, var(--dttn-sw-brown) 28%, transparent);
  --dttn-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--dttn-sw-sage) 45%, transparent);

  /* ── Component tokens ── */
  --dttn-header-bg: var(--dttn-chrome-bg);
  --dttn-header-bg-scrolled: var(--dttn-chrome-bg);
  --dttn-input-bg: var(--dttn-white);
  --dttn-input-bg-alt: var(--dttn-sw-peach-pale);
  --dttn-quote-faint: var(--dttn-sw-mint);
  --dttn-star-muted: color-mix(in srgb, var(--dttn-sw-sage) 38%, var(--dttn-sw-cream) 62%);
  --dttn-travel-card-fallback: color-mix(in srgb, var(--dttn-sw-brown) 78%, var(--dttn-sw-sage) 22%);
  --dttn-travel-btn-icon: var(--dttn-sw-sand);
  --dttn-overlay-text: color-mix(in srgb, var(--dttn-sw-cream) 88%, white);
  --dttn-footer-input-bg: var(--dttn-chrome-input-bg);
  --dttn-footer-dot: var(--dttn-chrome-accent);
  --dttn-footer-bar-text: color-mix(in srgb, var(--dttn-sw-cream) 85%, white);
  --dttn-footer-bar-text-muted: color-mix(in srgb, var(--dttn-sw-cream) 55%, var(--dttn-sw-sage) 45%);

  /* ── UI status (forms, vehicle select, alerts) ── */
  --dttn-success-text: color-mix(in srgb, var(--dttn-sw-sage) 50%, var(--dttn-sw-brown) 50%);
  --dttn-success-soft: var(--dttn-sw-pistachio);
  --dttn-success-border: color-mix(in srgb, var(--dttn-sw-sage) 55%, var(--dttn-sw-mint) 45%);
  --dttn-price-positive: color-mix(in srgb, var(--dttn-sw-sage) 58%, var(--dttn-sw-brown) 42%);
  --dttn-ui-info-bg: var(--dttn-sw-sky);
  --dttn-ui-info-border: color-mix(in srgb, var(--dttn-sw-sky) 70%, var(--dttn-sw-sage) 30%);
  --dttn-ui-info-text: var(--dttn-primary);
  --dttn-ui-accent-bg: color-mix(in srgb, var(--dttn-sw-pink) 30%, var(--dttn-sw-cream) 70%);
  --dttn-ui-accent-border: color-mix(in srgb, var(--dttn-sw-pink) 55%, var(--dttn-sw-rose) 45%);
  --dttn-ui-accent-text: color-mix(in srgb, var(--dttn-sw-rose) 75%, var(--dttn-sw-brown) 25%);
  --dttn-ui-warning-bg: var(--dttn-sw-peach-pale);
  --dttn-ui-warning-border: var(--dttn-sw-peach-light);
  --dttn-ui-warning-text: color-mix(in srgb, var(--dttn-sw-brown) 65%, var(--dttn-sw-ochre) 35%);
  --dttn-ui-danger: var(--dttn-sw-rose);
  --dttn-ui-danger-soft: color-mix(in srgb, var(--dttn-sw-rose) 22%, var(--dttn-sw-cream) 78%);
  --dttn-ui-danger-border: color-mix(in srgb, var(--dttn-sw-rose) 45%, var(--dttn-sw-peach-light) 55%);
  --dttn-ui-link: var(--dttn-primary);
  --dttn-ui-link-hover: var(--dttn-primary-dark);
  --dttn-ui-placeholder: color-mix(in srgb, var(--dttn-sw-sage) 38%, var(--dttn-sw-cream) 62%);
  --dttn-ui-surface-subtle: var(--dttn-surface);
  --dttn-ui-highlight-bg: var(--dttn-sw-sand);
  --dttn-ui-highlight-border: var(--dttn-sw-ochre);
  --dttn-ui-highlight-text: var(--dttn-primary);
  --dttn-ui-disabled-bg: var(--dttn-border);
  --dttn-ui-disabled-text: var(--dttn-muted);
  --dttn-ui-glow: color-mix(in srgb, var(--dttn-sw-rose) 18%, transparent);

  /* ── Legacy aliases (vehicle_select & shared partials) ── */
  --dttn-hero-yellow: var(--dttn-sw-ochre);
  --dttn-hero-dark: var(--dttn-sw-brown);
  --dttn-red: var(--dttn-primary);
  --dttn-red-dark: var(--dttn-primary-dark);
  --dttn-red-soft: var(--dttn-primary-soft);
  --dttn-navy: var(--dttn-ink);
  --dttn-navy-dark: var(--dttn-footer-dark);
  --dttn-yellow: var(--dttn-primary);
  --dttn-yellow-dark: var(--dttn-primary-dark);
  --dttn-yellow-soft: var(--dttn-primary-soft);
  --dttn-dark: var(--dttn-ink);
  --dttn-emerald: var(--dttn-secondary);
  --dttn-emerald-dark: var(--dttn-secondary-dark);
  --dttn-emerald-glow: color-mix(in srgb, var(--dttn-sw-sage) 28%, transparent);
  --dttn-gold: var(--dttn-accent-alt);
  --dttn-gold-soft: var(--dttn-accent-soft);
  --dttn-blue-icon: var(--dttn-primary);
  --dttn-bg-soft: var(--dttn-surface);
  --font-body: var(--dttn-font);
  --navy: var(--dttn-ink);
  --gold: var(--dttn-primary);
  --white: var(--dttn-white);
  --border: var(--dttn-border);
  --text-soft: var(--dttn-muted);
}