/*
 * tokens.css — CSS Custom Properties (Design Tokens)
 * Parent theme defaults. Child themes override values in their own tokens.css.
 * No !important needed — child theme stylesheet loads after parent.
 */

:root {
  /* ── Colors ──────────────────────────────────────────────────── */
  --color-primary:        #1B3A6B;
  --color-primary-dark:   #122a52;
  --color-primary-light:  #2C5282;
  --color-secondary:      #E67E22;
  --color-accent:         #F39C12;

  --color-text:           #1A202C;
  --color-text-light:     #718096;
  --color-text-inverse:   #FFFFFF;

  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F7FAFC;
  --color-bg-dark:        #1A202C;
  --color-border:         #E2E8F0;

  /* Section-specific bg tokens (override per child theme) */
  --color-hero-bg:        var(--color-primary);
  --color-services-bg:    var(--color-bg-alt);
  --color-about-bg:       var(--color-bg);
  --color-reviews-bg:     var(--color-bg-alt);
  --color-areas-bg:       var(--color-bg);
  --color-trustbar-bg:    var(--color-bg-dark);
  --color-faq-bg:         var(--color-bg);
  --color-faq-open-bg:    var(--color-bg-alt);
  --color-blog-bg:        var(--color-bg);
  --color-cta-bg:         var(--color-primary-dark);

  /* Component colors */
  --color-btn-primary:    var(--color-secondary);
  --color-btn-primary-hover: var(--color-accent);
  --color-btn-text:       #FFFFFF;
  --color-btn-outline:    var(--color-primary);
  --color-card-bg:        #FFFFFF;
  --color-star:           #F59E0B;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-heading:   "Montserrat", sans-serif;
  --font-body:      "Open Sans", sans-serif;

  --font-size-base: 16px;
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */

  --font-weight-normal:  400;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-black:   800;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --section-padding-y:  5rem;
  --section-padding-y-sm: 3rem;
  --container-max:      1200px;
  --container-pad:      1.5rem;
  --gap-cards:          2rem;
  --gap-grid:           1.5rem;

  /* ── Borders & Radius ────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-card:  8px;
  --radius-btn:   4px;
  --radius-img:   0px;
  --radius-about-img: var(--radius-md);

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-card:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover:  0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.10);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ──────────────────────────────────────────────────── */
  --header-height:     72px;
  --sidebar-width:     30%;
  --content-width:     70%;
  --areas-columns:     4;
}

/* ── Dark mode support ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Intentionally left for child theme override if dark mode is needed */
  }
}