/* ============================================================
   Detaila Design System — Tokens (CSS Custom Properties)
   Source: DESIGN.md (Detaila car repair & detailing template)
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --color-primary: #1D3D3F;        /* Petrol — dark sections, headlines */
  --color-secondary: #2563EB;      /* Cobalt — button hover/focus ONLY */
  --color-accent: #CC4A00;         /* Signal Orange — CTAs, icons, counters */
  --color-text: #475569;           /* Slate 600 — body copy */
  --color-surface: #F5F7FA;        /* Blue-gray — light alt sections */
  --color-border: #E5E7EB;         /* Hairline borders */
  --color-white: #FFFFFF;

  /* Text on dark surfaces */
  --color-on-dark: #F5F7FA;
  --color-on-dark-heading: #FFFFFF;
  --color-on-dark-muted: rgba(245, 247, 250, 0.65);
  --color-on-dark-border: rgba(245, 247, 250, 0.18);
  --color-on-dark-divider: rgba(245, 247, 250, 0.18);

  /* ---------- Typography ---------- */
  --font-heading: "Sora", sans-serif;
  --font-body: "Inter", sans-serif;

  --text-display-size: 52px;  --text-display-weight: 600;  --text-display-lh: 1.1;  --text-display-tracking: -0.04em;
  --text-h2-size: 40px;       --text-h2-weight: 600;       --text-h2-lh: 1.1;       --text-h2-tracking: -0.04em;
  --text-h3-size: 30px;       --text-h3-weight: 600;       --text-h3-lh: 1.2;       --text-h3-tracking: -0.03em;
  --text-h4-size: 25px;       --text-h4-weight: 600;       --text-h4-lh: 1.2;       --text-h4-tracking: -0.03em;
  --text-h5-size: 22px;       --text-h5-weight: 600;       --text-h5-lh: 1.2;       --text-h5-tracking: -0.03em;
  --text-h6-size: 18px;       --text-h6-weight: 600;       --text-h6-lh: 1.3;       --text-h6-tracking: -0.02em;
  --text-body-size: 16px;     --text-body-weight: 400;     --text-body-lh: 1.6;
  --text-body-sm-size: 14px;  --text-body-sm-weight: 400;  --text-body-sm-lh: 1.6;
  --text-label-size: 16px;    --text-label-weight: 600;    --text-label-lh: 1.4;
  --text-nav-size: 18px;      --text-nav-weight: 600;      --text-nav-lh: 1.4;
  --text-counter-size: 50px;  --text-counter-weight: 600;  --text-counter-lh: 1.1; --text-counter-tracking: -0.02em;
  --text-price-size: 40px;    --text-price-weight: 600;    --text-price-lh: 1.1;    --text-price-tracking: -0.04em;

  /* ---------- Radii ---------- */
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --radius-corner-frame: 500px;

  /* ---------- Spacing ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-section: 80px;
  --space-widget: 20px;
  --space-gap-grid: 25px;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-gutter: 20px;
  --header-height: 91px;
  --hero-min-height: 900px;
  --hero-pad-top: 250px;
  --breakpoint-mobile: 767px;
  --breakpoint-mobile-xl: 880px;
  --breakpoint-tablet: 1024px;
  --breakpoint-tablet-xl: 1200px;
  --breakpoint-laptop: 1366px;

  /* ---------- Elevation ---------- */
  --shadow-card: 9px 11px 14px 0 rgba(0, 0, 0, 0.10);
  --shadow-lift: 0 10px 30px 0 rgba(45, 45, 45, 0.20);
  --shadow-none: none;

  /* ---------- Gradients ---------- */
  --gradient-hero-scrim: linear-gradient(90deg, var(--color-primary) 35%, rgba(29, 61, 63, 0) 75%);
  --gradient-split: linear-gradient(300deg, var(--color-primary) 50%, var(--color-accent) 50%);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.6, 0.1, 0.68, 0.53);
  --transition-fast: 0.3s;
  --transition-menu: 0.6s var(--ease-out);

  /* ---------- Component composites ---------- */
  /* button */
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-secondary);
  --btn-color: var(--color-white);
  --btn-radius: var(--radius-pill);
  --btn-padding: 14px 25px;
  --btn-font: var(--font-body);
  --btn-size: 16px;
  --btn-weight: 500;
  --btn-transform: capitalize;

  --btn-dark-bg: var(--color-primary);

  --btn-icon-padding: 5px 5px 5px 20px;
  --btn-icon-chip-bg: var(--color-white);
  --btn-icon-chip-bg-hover: var(--color-accent);
  --btn-icon-color: var(--color-primary);
  --btn-icon-color-hover: var(--color-white);
  --btn-icon-size: 24px;
  --btn-icon-chip-pad: 6px;

  /* card */
  --card-bg: var(--color-white);
  --card-radius: var(--radius-lg);
  --card-padding: 24px;
  --card-shadow: var(--shadow-card);

  --card-dark-bg: var(--color-primary);
  --card-dark-padding: 30px;

  /* eyebrow */
  --eyebrow-chip-size: 50px;
  --eyebrow-chip-bg: var(--color-primary);
  --eyebrow-chip-border: 2px solid var(--color-accent);
  --eyebrow-icon-color: var(--color-accent);
  --eyebrow-gap: 5px;

  /* inputs */
  --input-underline-border: 1px solid rgba(229, 231, 235, 0.25);
  --input-underline-padding: 10px 20px 10px 0;
  --input-pill-bg: #FAFAFA;
  --input-pill-border: 1px solid var(--color-border);
  --input-pill-padding: 12px 20px;

  /* social */
  --social-size: 30px;
  --social-bg: var(--color-accent);
  --social-color: var(--color-white);

  /* corner accent frame */
  --frame-border: 5px solid var(--color-accent);
}

:root {
  /* ============================================================
     RKS-Tuning additions (extend Detaila vocabulary)
     ============================================================ */
  /* header */
  --header-bg: var(--color-white);
  --header-border: 1px solid var(--color-border);
  --header-height-desktop: 91px;
  --header-height-scroll: 72px;

  /* nav */
  --nav-link-color: var(--color-text);
  --nav-link-hover: var(--color-primary);
  --nav-active: var(--color-primary);
  --nav-active-underline: 2px solid var(--color-accent);
  --nav-gap: 40px;

  /* logo */
  --logo-img-height: 52px;
  --logo-text-size: 22px;
  --logo-sub-color: var(--color-accent);

  /* section */
  --section-pad: var(--space-section);

  /* service / feature cards */
  --card-hover-lift: translateY(-6px);
  --card-hover-shadow: var(--shadow-lift);
  --service-icon-chip: 60px;
  --service-icon-chip-bg: var(--color-primary);
  --service-icon-color: var(--color-accent);

  /* stats */
  --stat-number-size: 48px;
  --stat-number-color: var(--color-accent);
  --stat-label-color: var(--color-on-dark-muted);

  /* CTA dark section */
  --cta-bg: var(--color-primary);

  /* page hero (interior pages) */
  --page-hero-min-height: 420px;
  --page-hero-bg: var(--color-primary);
  --breadcrumb-color: var(--color-on-dark-muted);

  /* contact block */
  --contact-icon-chip: 48px;
  --contact-icon-chip-bg: var(--color-accent);
  --contact-icon-color: var(--color-white);

  /* gallery */
  --gallery-radius: var(--radius-md);
  --gallery-gap: var(--space-md);

  /* footer */
  --footer-bg: var(--color-primary);
  --footer-color: var(--color-on-dark);
  --footer-heading: var(--color-on-dark-heading);
  --footer-muted: var(--color-on-dark-muted);
  --footer-bottom-border: 1px solid var(--color-on-dark-divider);
}

/* Small screens */
@media (max-width: 767px) {
  :root {
    --text-display-size: 34px;
    --text-h2-size: 28px;
    --text-h3-size: 24px;
    --text-h4-size: 21px;
    --section-pad: 56px;
    --nav-gap: 24px;
  }
}
@media (max-width: 480px) {
  :root {
    --text-display-size: 30px;
    --text-h2-size: 25px;
  }
}