/* ============================================================
   DrivewayQuote — Asphalt & Amber
   Generated from assets/brand/tokens.json. Keep in sync.
   RULE: no raw hex values anywhere else in this codebase.
   ============================================================ */

:root {
  /* --- Neutrals: the asphalt ground ------------------------- */
  --dq-asphalt:    #0F1621;
  --dq-slate-900:  #161F2C;
  --dq-slate-800:  #1E2836;
  --dq-slate-700:  #243141;
  --dq-slate-600:  #2B3949;
  --dq-slate-400:  #5A6B80;
  --dq-slate-300:  #8697AC;
  --dq-slate-200:  #B8C4D2;

  /* --- Amber: the signal ------------------------------------ */
  --dq-amber-600:  #E89A0C;
  --dq-amber-500:  #FFB020;
  --dq-amber-300:  #FFC85C;
  --dq-amber-200:  #FFD98A;
  --dq-amber-050:  #FFF4DE;

  /* --- Status ----------------------------------------------- */
  --dq-green-500:  #3DDC97;
  --dq-green-200:  #A6EFCB;
  --dq-alert-500:  #FF5C5C;

  /* --- Light surfaces --------------------------------------- */
  --dq-fog:        #F7F8FA;
  --dq-white:      #FFFFFF;
  --dq-ink:        #0F1621;

  /* --- Semantic aliases (prefer these in components) -------- */
  --dq-bg:              var(--dq-asphalt);
  --dq-panel:           var(--dq-slate-800);
  --dq-panel-raised:    var(--dq-slate-700);
  --dq-border:          var(--dq-slate-600);
  --dq-text:            var(--dq-slate-200);
  --dq-text-muted:      var(--dq-slate-300);
  --dq-text-disabled:   var(--dq-slate-400);
  --dq-text-strong:     var(--dq-white);
  --dq-accent:          var(--dq-amber-500);
  --dq-accent-hover:    var(--dq-amber-300);
  --dq-accent-press:    var(--dq-amber-600);
  --dq-on-accent:       var(--dq-asphalt);
  --dq-confirm:         var(--dq-green-500);
  --dq-danger:          var(--dq-alert-500);
  --dq-focus:           var(--dq-amber-300);

  /* --- Surface material fills (drawn polygons) --------------
     Fills are tuned for legibility over aerial imagery. STROKES are outline
     colours drawn over photography, so they run brighter than the fill they
     belong to - and every one is drawn over a dark casing (see
     MeasureView2D._drawSurface) so it reads on pale concrete and dark asphalt
     alike.                                                     */
  --dq-mat-asphalt:            #3B4757;
  --dq-mat-asphalt-stroke:     #C3D2E4;
  --dq-mat-concrete:           #B8C4D2;
  --dq-mat-concrete-stroke:    #FFFFFF;
  --dq-mat-stamped:            #A97B5B;
  --dq-mat-stamped-stroke:     #F0CFA8;
  --dq-mat-paver:              #B5533C;
  --dq-mat-paver-stroke:       #FF9E82;
  --dq-mat-gravel:             #8B8578;
  --dq-mat-gravel-stroke:      #E3DCC9;
  --dq-mat-fill-opacity:       0.38;

  /* --- Type -------------------------------------------------- */
  --dq-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --dq-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --dq-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --dq-text-xs:   0.75rem;
  --dq-text-sm:   0.875rem;
  --dq-text-base: 1rem;
  --dq-text-lg:   1.125rem;
  --dq-text-xl:   1.375rem;
  --dq-text-2xl:  1.75rem;
  --dq-text-3xl:  2.25rem;
  --dq-text-4xl:  3rem;
  --dq-text-5xl:  4rem;

  /* --- Shape & depth ---------------------------------------- */
  --dq-radius-sm:   6px;
  --dq-radius-md:   10px;
  --dq-radius-lg:   16px;
  --dq-radius-xl:   22px;
  --dq-radius-pill: 999px;

  --dq-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.44);
  --dq-shadow-float: 0 12px 48px rgba(0, 0, 0, 0.55);
  --dq-shadow-amber: 0 4px 20px rgba(255, 176, 32, 0.28);

  /* --- Motion ------------------------------------------------ */
  --dq-motion-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --dq-motion-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --dq-motion-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

/* Light surfaces — the scope sheet, print, and any document-like view.
   Scope with .dq-light rather than a media query: this is a deliberate
   surface treatment, not a user theme preference. */
.dq-light {
  --dq-bg:            var(--dq-fog);
  --dq-panel:         var(--dq-white);
  --dq-panel-raised:  var(--dq-white);
  --dq-border:        #DCE2EA;
  --dq-text:          #2B3949;
  --dq-text-muted:    #5A6B80;
  --dq-text-strong:   var(--dq-ink);
  color-scheme: light;
}

/* --- Base resets used by both index.html and brand.html ------ */
.dq-root {
  background: var(--dq-bg);
  color: var(--dq-text);
  font-family: var(--dq-font-body);
  -webkit-font-smoothing: antialiased;
}

.dq-display { font-family: var(--dq-font-display); letter-spacing: -0.02em; }
.dq-mono    { font-family: var(--dq-font-mono); font-variant-numeric: tabular-nums; }

/* Measurement readouts get tabular figures so digits don't jitter
   while the homeowner drags a vertex. */
.dq-measure {
  font-family: var(--dq-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--dq-amber-200);
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dq-focus);
  outline-offset: 2px;
  border-radius: var(--dq-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}