:root {
  /* Hi-Tech Dark Slate & Cyber Orange */
  --bg-primary: #f1f5f9;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;

  --header-bg: #0f172ae6;
  --header-text: #f8fafc;
  --footer-bg: #0f172a;
  --footer-text-muted: #94a3b8;
  --footer-text-heading: #ffffff;

  --accent-orange: #ff6b00;
  --accent-orange-hover: #e05d00;
  --accent-orange-text: #ffffff;

  --btn-primary-bg: var(--accent-orange);
  --btn-primary-hover: var(--accent-orange-hover);
  --btn-primary-text: var(--accent-orange-text);
  --btn-secondary-bg: #e2e8f0;
  --btn-secondary-hover: #cbd5e1;
  --btn-secondary-text: #0f172a;

  --text-main: #0f172a;
  --text-muted: #64748b;
  --status-success: #10b981;
  --price-discount: var(--accent-orange);
  --price-old: #94a3b8;

  --color-canvas: var(--bg-primary);
  --color-surface: var(--bg-card);
  --color-surface-soft: #e2e8f0;
  --color-ink: var(--text-main);
  --color-muted: var(--text-muted);
  --color-border: var(--border-color);
  --color-cream: #e2e8f0;
  --color-charcoal: #0f172a;

  --color-primary: var(--accent-orange);
  --color-primary-hover: var(--accent-orange-hover);
  --color-btn-text: var(--accent-orange-text);

  --color-coral: var(--color-primary);
  --color-coral-hover: var(--color-primary-hover);
  --color-coral-deep: #c2410c;
  --color-coral-soft: #ffedd5;
  --color-coral-mist: #fed7aa;
  --color-aurora-1: #e2e8f0;
  --color-aurora-2: #cbd5e1;
  --color-aurora-3: #f8fafc;
  --color-header-bg: #0f172a;
  --color-header-btn: var(--btn-secondary-bg);
  --color-header-btn-hover: var(--accent-orange);
  --color-header-btn-text: var(--btn-secondary-text);
  --color-chip: #ffffff;
  --color-chip-text: var(--color-ink);
  --btn-shadow: 0 6px 16px rgba(255, 107, 0, 0.28);

  --color-accent: var(--accent-orange);
  --color-accent-hover: var(--accent-orange-hover);
  --accent-solar: var(--accent-orange);
  --accent-solar-hover: var(--accent-orange-hover);
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-success-soft: #d1fae5;
  --color-success: var(--status-success);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Тема: Менший 0.9 / Звичайний 1 / Більший 1.15
     Body-scale → html font-size (усі rem). Display — відносно body. */
  --font-scale-body: 1;
  --font-scale-display: 1;
  --font-scale-display-eff: calc(
    var(--font-scale-display) / var(--font-scale-body)
  );

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: calc(1.25rem * var(--font-scale-display-eff));
  --text-2xl: clamp(
    calc(1.5rem * var(--font-scale-display-eff)),
    calc(2.4vw * var(--font-scale-display)),
    calc(2rem * var(--font-scale-display-eff))
  );
  --text-3xl: clamp(
    calc(2rem * var(--font-scale-display-eff)),
    calc(4vw * var(--font-scale-display)),
    calc(3rem * var(--font-scale-display-eff))
  );
  --text-hero: clamp(
    calc(2.5rem * var(--font-scale-display-eff)),
    calc(6vw * var(--font-scale-display)),
    calc(4.5rem * var(--font-scale-display-eff))
  );

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --section-y: clamp(4rem, 8vw, 6.5rem);
  --container: min(72rem, calc(100% - 2.5rem));
  --container-wide: min(86rem, calc(100% - 2rem));
  --measure: 38rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  --shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.05);
  --shadow-lift: 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.06);

  --z-header: 40;
  --z-drawer: 50;
  --z-overlay: 45;
  --z-toast: 60;

  --header-h: 4.25rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --touch: 2.75rem;
}