/* ==========================================================================
   Accents — only remap brand / CTA / emphasis tokens
   Use with any theme: <section data-theme="noir" data-accent="crimson">
   ========================================================================== */

[data-accent] {
  /* Reset theme-specific hover (e.g. noir zinc) when brand is remapped */
  --brand-hover: var(--brand-700);
}

[data-accent="crimson"] {
  --brand-50: #fff1f2;
  --brand-100: #ffe4e6;
  --brand-300: #fda4af;
  --brand-500: #f43f5e;
  --brand-600: #e11d48;
  --brand-700: #be123c;
  --brand-rgb: 225, 29, 72;
  --on-brand: #ffffff;
  --ambient-1: #e11d4814;
  --atmo-glow: #e11d4829;
  --atmo-glow-soft: #fda4af33;
  --shadow-brand: 0 10px 25px -8px rgba(225, 29, 72, 0.4);
}

[data-accent="ember"] {
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-300: #fdba74;
  --brand-500: #fb923c;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --brand-rgb: 234, 88, 12;
  --on-brand: #ffffff;
  --ambient-1: #ea580c14;
  --atmo-glow: #f9731629;
  --atmo-glow-soft: #fdba7433;
  --shadow-brand: 0 10px 25px -8px rgba(234, 88, 12, 0.4);
}

[data-accent="safety"] {
  --brand-50: #fefce8;
  --brand-100: #fef9c3;
  --brand-300: #fde047;
  --brand-500: #eab308;
  --brand-600: #ca8a04;
  --brand-700: #a16207;
  --brand-rgb: 202, 138, 4;
  --on-brand: #0f172a;
  --ambient-1: #eab30814;
  --atmo-glow: #eab30829;
  --atmo-glow-soft: #fde04733;
  --shadow-brand: 0 10px 25px -8px rgba(202, 138, 4, 0.45);
}

[data-accent="volt"] {
  --brand-50: #f7fee7;
  --brand-100: #ecfccb;
  --brand-300: #bef264;
  --brand-500: #a3e635;
  --brand-600: #84cc16;
  --brand-700: #65a30d;
  --brand-rgb: 132, 204, 22;
  --on-brand: #0f172a;
  --ambient-1: #84cc1614;
  --atmo-glow: #84cc1629;
  --atmo-glow-soft: #bef26433;
  --shadow-brand: 0 10px 25px -8px rgba(132, 204, 22, 0.4);
}

[data-accent="teal"] {
  --brand-50: #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-300: #5eead4;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-rgb: 13, 148, 136;
  --on-brand: #ffffff;
  --ambient-1: #14b8a614;
  --atmo-glow: #0d948829;
  --atmo-glow-soft: #5eead433;
  --shadow-brand: 0 10px 25px -8px rgba(13, 148, 136, 0.4);
}

[data-accent="sky"] {
  --brand-50: #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-300: #7dd3fc;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-rgb: 2, 132, 199;
  --on-brand: #ffffff;
  --ambient-1: #0ea5e914;
  --atmo-glow: #0284c729;
  --atmo-glow-soft: #7dd3fc33;
  --shadow-brand: 0 10px 25px -8px rgba(2, 132, 199, 0.4);
}

[data-accent="forest"] {
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-300: #6ee7b7;
  --brand-500: #34d399;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-rgb: 5, 150, 105;
  --on-brand: #ffffff;
  --ambient-1: #05966914;
  --atmo-glow: #10b98129;
  --atmo-glow-soft: #6ee7b733;
  --shadow-brand: 0 10px 25px -8px rgba(5, 150, 105, 0.4);
}

[data-accent="violet"] {
  --brand-50: #faf5ff;
  --brand-100: #f3e8ff;
  --brand-300: #c4b5fd;
  --brand-500: #a78bfa;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-rgb: 124, 58, 237;
  --on-brand: #ffffff;
  --ambient-1: #7c3aed14;
  --atmo-glow: #6d28d929;
  --atmo-glow-soft: #c4b5fd33;
  --shadow-brand: 0 10px 25px -8px rgba(124, 58, 237, 0.4);
}

[data-accent="copper"] {
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-300: #fdba74;
  --brand-500: #f59e0b;
  --brand-600: #d97706;
  --brand-700: #b45309;
  --brand-rgb: 217, 119, 6;
  --on-brand: #0f172a;
  --ambient-1: #d9770614;
  --atmo-glow: #ea580c33;
  --atmo-glow-soft: #fdba7433;
  --shadow-brand: 0 10px 25px -8px rgba(217, 119, 6, 0.4);
}

[data-accent="rose"] {
  --brand-50: #fff1f2;
  --brand-100: #ffe4e6;
  --brand-300: #fda4af;
  --brand-500: #fb7185;
  --brand-600: #e11d48;
  --brand-700: #9f1239;
  --brand-rgb: 225, 29, 72;
  --on-brand: #ffffff;
  --ambient-1: #e11d4814;
  --atmo-glow: #fb718529;
  --atmo-glow-soft: #fda4af33;
  --shadow-brand: 0 10px 25px -8px rgba(225, 29, 72, 0.4);
}

/* Optional: force accent onto borders of framed cards inside the scope */
[data-accent] .accent-border,
[data-accent].accent-borders .service-card,
[data-accent].accent-borders .price-card,
[data-accent].accent-borders .package-card:not(.is-featured),
[data-accent].accent-borders .benefit-card,
[data-accent].accent-borders .icon-tile,
[data-accent].accent-borders .step-card,
[data-accent].accent-borders .team-card,
[data-accent].accent-borders .amenity-item,
[data-accent].accent-borders .tariff-card:not(.is-featured),
[data-accent].accent-borders .frame-dashed,
[data-accent].accent-borders .frame-dotted {
  border-color: color-mix(in srgb, var(--brand-600) 45%, var(--line));
}

[data-accent] .accent-border:hover,
[data-accent].accent-borders .service-card:hover,
[data-accent].accent-borders .price-card:hover,
[data-accent].accent-borders .benefit-card:hover,
[data-accent].accent-borders .icon-tile:hover,
[data-accent].accent-borders .step-card:hover,
[data-accent].accent-borders .amenity-item:hover {
  border-color: var(--brand-600);
}