/*
 * tokens.css — Mirage public palette (single source of truth).
 * Primary #b33f00 (Accessible Orange) - meets WCAG AA contrast requirements.
 * --green-* names are kept for compatibility with existing rules.
 */
:root {
  /* ===== Neutrals ===== */
  --black-950: #020202;
  --black-900: #050505;
  --black-800: #0E0E0E;
  --black-700: #161616;
  --black-600: #1F1F1F;

  /* ===== Primary scale (accessible orange - meets WCAG AA) ===== */
  --green-900: #0c2433;
  --green-800: #102f42;
  --green-700: #8f3200;
  --green-600: #b33f00;
  --green-500: #d45400;
  --green-400: #3a7ba3;
  --green-300: #6ba3c4;

  /* Bright accent on dark backgrounds (links, highlights) */
  --malachite: #7eb8d9;

  /* Main document (light) — matches classic Mirage / Bootstrap inner pages */
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-on-green: #FFFFFF;

  /* ===== Semantic tokens ===== */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8f9fa;
  --color-border: #dee2e6;
  --color-primary: var(--green-600);
  --color-primary-hover: var(--green-500);
  --color-primary-active: var(--green-700);
  --color-accent: var(--malachite);
  --color-accent-glow: rgba(126, 184, 217, 0.35);
  /* Primary “foreground” on brand-coloured controls and hero overlays (white) */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);

  /* ===== Motion (for animations; use with prefers-reduced-motion) ===== */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* ===== Theme (wired to palette) ===== */
  --primary: var(--color-primary);
  --primary-hover: var(--green-700);
  --primary-outline: var(--color-primary-active);

  --text-heading: var(--text-primary);
  --text-body: var(--text-secondary);

  --bg-main: #ffffff;
  --bg-light: #f5f5f5;
  --bg-dark: var(--black-900);
  --body-bg-color: #ffffff;

  --border-color: #e6e6e6;
  --border-on-dark: rgba(255, 255, 255, 0.2);
  --border-on-dark-muted: rgba(255, 255, 255, 0.6);
  --border-on-dark-strong: #ffffff;
  --border-on-dark-soft: rgba(255, 255, 255, 0.15);
  --border-on-dark-mid: rgba(255, 255, 255, 0.25);
  --border-on-dark-subtle: rgba(255, 255, 255, 0.08);
  --border-on-dark-18: rgba(255, 255, 255, 0.18);
  --section-divider-line: rgba(255, 255, 255, 0.12);
  --bg-on-dark-hover: rgba(255, 255, 255, 0.2);
  --bg-on-dark-subtle: rgba(255, 255, 255, 0.06);
  --bg-on-dark-soft: rgba(255, 255, 255, 0.1);
  --bg-on-dark-mid: rgba(255, 255, 255, 0.15);
  --bg-on-dark-input: rgba(255, 255, 255, 0.08);
  --bg-on-dark-input-focus: rgba(255, 255, 255, 0.12);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-card-strong: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-text: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-text-soft: 0 1px 3px rgba(0, 0, 0, 0.5);
  --gradient-hero-card: linear-gradient(135deg, rgba(15, 20, 25, 0.62) 0%, rgba(26, 35, 50, 0.55) 100%);
  --surface-darker: var(--black-950);
  --surface-darker-alt: var(--black-900);
  --gradient-dark: linear-gradient(135deg, var(--black-900) 0%, var(--black-800) 100%);
  --primary-contrast: var(--color-primary);
  --primary-contrast-hover: var(--color-primary-hover);
  --blog-preview-hover: rgba(0, 0, 0, 0.04);
  --input-option-bg: var(--black-700);
  --text-on-light: #1a1a1a;
  --booking-sidebar-bg: linear-gradient(160deg, #2b2e4a 0%, #20233b 100%);
  /* Booking page card style: light green tint */
  --booking-card-bg: rgba(26, 82, 118, 0.06);
  --booking-card-border: rgba(26, 82, 118, 0.22);
  --booking-card-inner: rgba(26, 82, 118, 0.1);
  --booking-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-booking: 0 10px 24px rgba(33, 37, 41, 0.18);

  --success: #28a745;
  --warning: #ff9800;
  --danger: #dc3545;
  --info: #17a2b8;

  --testimonial-star: #ffb74d;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --success-hover: #238f44;
  --success-light: #3d9f5a;

  /* ===== On dark (hero, footer, header strips) — always light text; do not alias --text-primary (default appearance flips it). ===== */
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.85);
  --text-on-dark-soft: rgba(255, 255, 255, 0.7);
  --text-on-dark-faint: rgba(255, 255, 255, 0.4);
  --text-on-dark-strong: rgba(255, 255, 255, 0.95);
  --text-on-dark-90: rgba(255, 255, 255, 0.9);
  --text-on-dark-88: rgba(255, 255, 255, 0.88);
  --text-on-dark-80: rgba(255, 255, 255, 0.8);
  --text-on-dark-75: rgba(255, 255, 255, 0.75);
  --text-on-dark-72: rgba(255, 255, 255, 0.72);
  --border-on-dark-90: rgba(255, 255, 255, 0.9);
  --border-on-dark-35: rgba(255, 255, 255, 0.35);
  --border-on-dark-50: rgba(255, 255, 255, 0.5);
  --border-on-dark-30: rgba(255, 255, 255, 0.3);
  --border-on-dark-40: rgba(255, 255, 255, 0.4);
  --bg-on-dark-25: rgba(255, 255, 255, 0.25);
  --bg-on-dark-12: rgba(255, 255, 255, 0.12);
  --bg-on-dark-08: rgba(255, 255, 255, 0.08);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-dark-strong: rgba(0, 0, 0, 0.85);
  --overlay-dark-55: rgba(0, 0, 0, 0.55);
  --overlay-dark-60: rgba(0, 0, 0, 0.6);
  /* Primary-tinted strip overlay (Mirage blue) */
  --strip-overlay: rgba(12, 36, 51, 0.52);
  --strip-overlay-strong: rgba(12, 36, 51, 0.74);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.4);
  --shadow-banner: 0 -10px 30px rgba(0, 0, 0, 0.28);

  /* ===== Compatibility aliases ===== */
  --color-bg-dark: var(--bg-dark);
  --color-bg-light: var(--bg-light);
  --color-muted: var(--text-muted);
  --color-text: var(--text-heading);

  --primary-light: var(--primary);
  --primary-foreground: var(--text-on-green);
  --accent: var(--color-accent);
  --accent-foreground: var(--primary-foreground);
  --strip-dark: var(--black-900);
  --strip-dark-muted: var(--black-800);
  --hero-gradient: linear-gradient(145deg, var(--green-900), var(--green-800), var(--green-700));

  --surface-dark: var(--black-900);
  --surface-dark-soft: var(--black-800);
  --surface-mid: #2d3748;
  --surface-light: var(--bg-light);
  --surface-light-alt: var(--bg-light);
  --surface: var(--bg-main);

  --border: var(--border-color);
  --border-light: var(--bg-light);

  --error: var(--danger);

  /* Mirage nav / CTA strip (theme.css); not flat black */
  --secondary: #2b2e4a;
  --secondary-strong: #1f223c;
  --light: var(--bg-light);
  /* Bootstrap legacy + app_old public: .bg-dark / footer (not --bg-dark near-black) */
  --dark: #212529;

  /* ===== Strip/feedback (use root tokens) ===== */
  --strip-feedback-bg: var(--green-700);
  --strip-feedback-text: var(--text-on-green);
  --strip-feedback-border: var(--black-950);

  /* ===== Spacing scale ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-py: var(--space-12);
  --section-px: var(--space-4);
  --container-max: 1200px;
  --container-gutter: var(--space-4);

  /* ===== Type scale ===== */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --heading-1: clamp(1.75rem, 4vw, 2.75rem);
  --heading-2: clamp(1.5rem, 3vw, 2.25rem);
  --heading-3: clamp(1.25rem, 2.5vw, 1.75rem);
  --heading-4: clamp(1.125rem, 2vw, 1.5rem);
  --line-height-tight: 1.2;
  --line-height-body: 1.6;

}

/* FAQ section: same primary scale as root */
.faq-new,
#faqpage-new,
[id^="estimator-faq"],
[id^="estimator-mechanic-faq"] {
  --primary: var(--green-600);
  --primary-hover: var(--green-500);
  --primary-outline: var(--green-700);
  --text-heading: #222222;
  --text-body: #555555;
  --text-muted: #888888;
  --bg-dark: var(--black-900);
  --strip-dark: var(--black-900);
  --surface-dark: var(--black-900);
  --surface-dark-soft: var(--black-800);
  --secondary: var(--black-900);
  --dark: var(--black-900);
  --color-surface: var(--black-800);
  --strip-dark-muted: var(--black-800);
  --accent: var(--green-600);
  --primary-light: var(--green-600);
  --hero-gradient: linear-gradient(145deg, var(--green-900), var(--green-800), var(--green-700));
  --text-primary: var(--text-heading);
  --text-secondary: var(--text-body);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: rgba(255, 255, 255, 0.85);
}