/* =============================================================================
   crawlspacesupport.com — Design Tokens ("Structural Clarity")
   -----------------------------------------------------------------------------
   The design system for the crawl space directory + lead marketplace, and the
   single source of truth for every visual value on the site. Pages never
   hardcode colors or sizes — always var(--...). This file is mirrored verbatim
   to site/css/tokens.css and loaded FIRST in the CSS order:
     tokens.css -> global.css -> nav.css -> footer.css -> components.css -> inline <style>

   What the palette signals (see DESIGN_BRIEF.md): crawl space work is about
   dryness, structure, and protection. Foundation Slate neutrals carry the
   structure/dryness; Signal Blue is the one primary action color (managed-water
   trust); Clay Amber is reserved for VALUE — Average Price bands, filled rating
   stars, and the homeowner "Get a quote" CTA — so price literally glows as the
   thing this product is about. Deliberately NOT CoastalCleans teal: its own brand.

   Fonts (Google Fonts, async-loaded): Plus Jakarta Sans (display), Inter (body).
   Both light and dark themes ship; AA contrast is held on each (see notes below).
   ============================================================================ */

:root {
  /* ---- Raw palette (do not use directly in components; map via semantic below) */
  --raw-slate-25:   #FBFCFD;
  --raw-slate-50:   #F4F6F9;
  --raw-slate-100:  #ECEFF3;
  --raw-slate-200:  #DCE2EA;
  --raw-slate-300:  #C2CBD6;
  --raw-slate-400:  #8A95A3;
  --raw-slate-500:  #5E6B7A;
  --raw-slate-600:  #4A5765;
  --raw-slate-700:  #313C49;
  --raw-slate-800:  #1E2832;
  --raw-slate-900:  #15202B;
  --raw-slate-950:  #0E141B;

  --raw-blue-300:   #9DBBF5;
  --raw-blue-400:   #5B8DEF;
  --raw-blue-500:   #2F6FED;   /* primary accent */
  --raw-blue-600:   #2459C9;
  --raw-blue-700:   #1E49A8;
  --raw-blue-50:    #EAF1FE;

  --raw-amber-300:  #F2B879;
  --raw-amber-400:  #E89A52;
  --raw-amber-500:  #E08A3C;   /* secondary accent — value/price/CTA */
  --raw-amber-600:  #C9762C;
  --raw-amber-50:   #FCF2E6;

  --raw-green-500:  #2E9E6B;
  --raw-yellow-500: #D9A21B;
  --raw-red-500:    #D64545;
  --raw-cyan-500:   #2F8FB0;

  /* ===========================================================================
     LIGHT MODE (default)
     =========================================================================== */

  /* ---- Color: surfaces */
  --color-bg-primary:        var(--raw-slate-25);
  --color-bg-secondary:      var(--raw-slate-50);   /* cards */
  --color-bg-tertiary:       var(--raw-slate-100);  /* inputs, wells */
  --color-bg-inverse:        var(--raw-slate-900);  /* dark sections, footer */

  /* ---- Color: text */
  --color-text-primary:      var(--raw-slate-900);
  --color-text-secondary:    var(--raw-slate-600);
  --color-text-tertiary:     var(--raw-slate-400);  /* placeholder/disabled */
  --color-text-inverse:      #F1F5F9;               /* on inverse/dark sections */
  --color-text-link:         var(--raw-blue-600);

  /* ---- Color: borders */
  --color-border-primary:    var(--raw-slate-200);
  --color-border-secondary:  var(--raw-slate-100);
  --color-border-focus:      var(--raw-blue-500);

  /* ---- Color: accents */
  --color-accent-primary:         var(--raw-blue-500);
  --color-accent-primary-hover:   var(--raw-blue-600);
  --color-accent-primary-active:  var(--raw-blue-700);
  --color-accent-primary-soft:    var(--raw-blue-50);   /* tinted backgrounds */
  --color-accent-secondary:        var(--raw-amber-500); /* price/value + quote CTA */
  --color-accent-secondary-hover:  var(--raw-amber-600);
  --color-accent-secondary-soft:   var(--raw-amber-50);

  /* ---- Color: status */
  --color-status-success:    var(--raw-green-500);
  --color-status-warning:    var(--raw-yellow-500);
  --color-status-error:      var(--raw-red-500);
  --color-status-info:       var(--raw-cyan-500);

  --color-surface-overlay:   rgba(21, 32, 43, 0.55); /* modal/dropdown backdrop */

  /* ---- Component tokens (semantic, project-specific) */
  --card-bg:                 var(--color-bg-secondary);
  --card-border:             var(--color-border-primary);
  --input-bg:                var(--color-bg-primary);
  --input-border:            var(--color-border-primary);
  --rating-star:             var(--raw-amber-500);     /* filled star */
  --rating-star-empty:       var(--raw-slate-300);
  --price-band-bg:           var(--color-accent-secondary-soft);
  --price-band-text:         var(--raw-amber-600);
  --lock-overlay-bg:         rgba(21, 32, 43, 0.72);   /* locked-contact redaction */
  --lock-accent:             var(--raw-amber-500);
  --coverage-badge-bg:       var(--color-accent-primary-soft);
  --coverage-badge-text:     var(--raw-blue-700);

  /* ---- Spacing (4px base) */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */
  --space-9:   6rem;     /* 96px */
  --space-10:  8rem;     /* 128px */
  --space-11:  12rem;    /* 192px */
  --space-12:  16rem;    /* 256px */

  /* ---- Typography */
  --font-family-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-family-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --font-size-xs:   0.75rem;   /* 12px — labels, meta */
  --font-size-sm:   0.875rem;  /* 14px — secondary, chips */
  --font-size-base: 1rem;      /* 16px — body */
  --font-size-md:   1.125rem;  /* 18px — lead paragraph */
  --font-size-lg:   1.375rem;  /* 22px — card titles, h3 */
  --font-size-xl:   1.75rem;   /* 28px — section h2 */
  --font-size-2xl:  2.25rem;   /* 36px — page h1 */
  --font-size-3xl:  3rem;      /* 48px — hero (desktop) */
  --font-size-4xl:  3.75rem;   /* 60px — hero display */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:    1.15;  /* display/headings */
  --line-height-snug:     1.3;   /* card titles */
  --line-height-normal:   1.55;  /* body */
  --line-height-relaxed:  1.7;   /* long-form /why articles */

  --letter-spacing-tight:  -0.02em;  /* large display */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.06em;   /* all-caps labels/eyebrows */

  /* ---- Layout */
  --max-width-content:  68ch;     /* /why article reading width */
  --max-width-wide:     1040px;   /* standard content (search, profile) */
  --max-width-page:     1280px;   /* full page container */

  --border-radius-sm:   4px;
  --border-radius-md:   8px;      /* cards, inputs */
  --border-radius-lg:   14px;     /* hero panels, modals */
  --border-radius-xl:   22px;
  --border-radius-full: 999px;    /* pills, chips, avatars */

  --shadow-sm:    0 1px 2px rgba(21, 32, 43, 0.06), 0 1px 1px rgba(21, 32, 43, 0.04);
  --shadow-md:    0 4px 12px rgba(21, 32, 43, 0.08), 0 2px 4px rgba(21, 32, 43, 0.05);
  --shadow-lg:    0 12px 32px rgba(21, 32, 43, 0.12), 0 4px 8px rgba(21, 32, 43, 0.06);
  --shadow-focus: 0 0 0 3px rgba(47, 111, 237, 0.35);

  /* ---- Motion */
  --duration-instant:  50ms;
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:       cubic-bezier(0.4, 0, 1, 1);
  --easing-out:      cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Responsive breakpoints (reference values for media queries) */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;
}

/* =============================================================================
   DARK MODE — cool Foundation Slate, not inverted. Slightly reduced contrast,
   lightened accents to hold AA on dark surfaces, deeper/softer shadows.
   ============================================================================ */

[data-theme="dark"] {
  --color-bg-primary:        var(--raw-slate-950);
  --color-bg-secondary:      var(--raw-slate-800);
  --color-bg-tertiary:       var(--raw-slate-700);
  --color-bg-inverse:        var(--raw-slate-25);

  --color-text-primary:      #E6EBF1;
  --color-text-secondary:    #A6B2C0;
  --color-text-tertiary:     #6E7C8C;
  --color-text-inverse:      var(--raw-slate-900);
  --color-text-link:         var(--raw-blue-400);

  --color-border-primary:    #2A3540;
  --color-border-secondary:  #222C36;
  --color-border-focus:      var(--raw-blue-400);

  --color-accent-primary:         var(--raw-blue-400);
  --color-accent-primary-hover:   var(--raw-blue-300);
  --color-accent-primary-active:  var(--raw-blue-500);
  --color-accent-primary-soft:    rgba(91, 141, 239, 0.14);
  --color-accent-secondary:        var(--raw-amber-400);
  --color-accent-secondary-hover:  var(--raw-amber-300);
  --color-accent-secondary-soft:   rgba(232, 154, 82, 0.14);

  --color-status-success:    #4CB98A;
  --color-status-warning:    #E2B43F;
  --color-status-error:      #E76A6A;
  --color-status-info:       #57AECB;

  --color-surface-overlay:   rgba(0, 0, 0, 0.6);

  --card-bg:                 var(--color-bg-secondary);
  --card-border:             var(--color-border-primary);
  --input-bg:                var(--raw-slate-800);
  --input-border:            #2A3540;
  --rating-star:             var(--raw-amber-400);
  --rating-star-empty:       #3A4654;
  --price-band-bg:           rgba(232, 154, 82, 0.14);
  --price-band-text:         var(--raw-amber-300);
  --lock-overlay-bg:         rgba(0, 0, 0, 0.78);
  --lock-accent:             var(--raw-amber-400);
  --coverage-badge-bg:       rgba(91, 141, 239, 0.14);
  --coverage-badge-text:     var(--raw-blue-300);

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 14px 36px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(91, 141, 239, 0.45);
}

/* System-preference dark mode, unless the user explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:        var(--raw-slate-950);
    --color-bg-secondary:      var(--raw-slate-800);
    --color-bg-tertiary:       var(--raw-slate-700);
    --color-bg-inverse:        var(--raw-slate-25);

    --color-text-primary:      #E6EBF1;
    --color-text-secondary:    #A6B2C0;
    --color-text-tertiary:     #6E7C8C;
    --color-text-inverse:      var(--raw-slate-900);
    --color-text-link:         var(--raw-blue-400);

    --color-border-primary:    #2A3540;
    --color-border-secondary:  #222C36;
    --color-border-focus:      var(--raw-blue-400);

    --color-accent-primary:         var(--raw-blue-400);
    --color-accent-primary-hover:   var(--raw-blue-300);
    --color-accent-primary-active:  var(--raw-blue-500);
    --color-accent-primary-soft:    rgba(91, 141, 239, 0.14);
    --color-accent-secondary:        var(--raw-amber-400);
    --color-accent-secondary-hover:  var(--raw-amber-300);
    --color-accent-secondary-soft:   rgba(232, 154, 82, 0.14);

    --color-status-success:    #4CB98A;
    --color-status-warning:    #E2B43F;
    --color-status-error:      #E76A6A;
    --color-status-info:       #57AECB;

    --color-surface-overlay:   rgba(0, 0, 0, 0.6);

    --card-bg:                 var(--color-bg-secondary);
    --card-border:             var(--color-border-primary);
    --input-bg:                var(--raw-slate-800);
    --input-border:            #2A3540;
    --rating-star:             var(--raw-amber-400);
    --rating-star-empty:       #3A4654;
    --price-band-bg:           rgba(232, 154, 82, 0.14);
    --price-band-text:         var(--raw-amber-300);
    --lock-overlay-bg:         rgba(0, 0, 0, 0.78);
    --lock-accent:             var(--raw-amber-400);
    --coverage-badge-bg:       rgba(91, 141, 239, 0.14);
    --coverage-badge-text:     var(--raw-blue-300);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg:    0 14px 36px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(91, 141, 239, 0.45);
  }
}

/* Respect reduced-motion globally (components should also gate their own anims). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}

/* =============================================================================
   SYSTEM NOTES — how to use and extend these tokens
   - Philosophy: Structural Clarity. 4px spacing base (balanced/Swiss). Tight
     letter-spacing on display; AA contrast verified on both light and dark.
   - Color roles: use the SEMANTIC tokens in components (--color-*, --card-*,
     --price-band-*, --lock-*), never the raw scale (--raw-*) directly. Signal
     Blue is the only primary action color; Clay Amber is value-only (Average
     Price, filled stars, the "Get a quote" CTA). Adding a third accent breaks
     the system — route new emphasis through weight/size or an existing role.
   - Dark mode: cool slate (#0E141B base), accents lightened one step
     (blue-400 / amber-400) to hold >=4.5:1 on dark surfaces; shadows deepened.
     Theme is set by data-theme on <html> (theme.js) and falls back to
     prefers-color-scheme.
   - Relationship to CoastalCleans: different fonts (Jakarta/Inter vs Lato) and
     palette (blue/amber/slate vs teal/cream) for brand separation, but the
     token NAMES are kept identical for shared muscle memory across both sites.
   ============================================================================ */