/* ==========================================================================
   LG Depot Appliances and HVAC, Coral Springs FL
   Design tokens. Nothing in styles.css may hardcode a colour, size or space.
   The accent matches the blue of the AI drawn logo from his demo; resample it from his own logo when he sends it.
   --c-accent carries white text at 6.4:1; --c-accent-ink is 6.4:1 on white; --c-accent-lt is 7.2:1 on ink.
   ========================================================================== */
:root {
  --c-accent:      #1F5FA8;
  --c-accent-dk:   #194C86;
  --c-accent-lt:   #6DA4E4;
  --c-accent-tint: #E9EFF6;
  --c-accent-ink:  #1F5FA8;
  --c-on-accent:   #FFFFFF;
  --c-focus:       rgba(31,95,168,.45);
  --emblem-filter: none;

  --c-ink:          #0F1318;
  --c-ink-2:        #1A2027;
  --c-surface:      #FFFFFF;
  --c-paper:        #F4F5F7;
  --c-line:         #E2E5EA;
  --c-body:         #3A414C;
  --c-muted:        #5A6371;
  --c-on-dark:      rgba(255,255,255,.84);
  --c-on-dark-strong: #FFFFFF;
  --c-on-dark-line: rgba(255,255,255,.22);
  --c-glass:        rgba(255,255,255,.08);
  --c-glass-strong: rgba(255,255,255,.14);
  --c-star:         #F5B301;
  --c-star-off:     #8A919C;
  --c-photo-wash:   rgba(31,95,168,.12);
  --c-glow:         rgba(31,95,168,.2);   /* the brand light in the corner of a dark section */
  --c-on-dark-muted: rgba(255,255,255,.68);
  --c-dark-surface: rgba(255,255,255,.05);
  --c-dark-surface-2: rgba(255,255,255,.09);
  --c-dark-line:    rgba(255,255,255,.13);
  --c-road:         #23282F;
  --c-header:       rgba(15,19,24,.88);

  --hero-plain:    radial-gradient(120% 90% at 85% 10%, rgba(31,95,168,.55) 0%, rgba(31,95,168,0) 60%), linear-gradient(135deg, #0F1318 0%, #1A2027 100%);
  --scrim-hero:    linear-gradient(90deg, rgba(15,19,24,.94) 0%, rgba(15,19,24,.86) 38%, rgba(15,19,24,.58) 68%, rgba(15,19,24,.38) 100%);
  --scrim-hero-sm: linear-gradient(180deg, rgba(15,19,24,.88) 0%, rgba(15,19,24,.80) 50%, rgba(15,19,24,.92) 100%);
  --scrim-caption: linear-gradient(to top, rgba(15,19,24,.92), rgba(15,19,24,0));
  --scrim-dark:    linear-gradient(180deg, rgba(15,19,24,.78) 0%, rgba(15,19,24,.9) 100%);

  /* the display type is picked per business (html[data-type], styles.css); these are the defaults (Oswald) */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-ui:      "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-display: 700;
  --fw-bold:    650;

  --fs-1: .8125rem;
  --fs-2: .9375rem;
  --fs-3: 1.0625rem;
  --fs-4: clamp(1.3rem, 1.05rem + .9vw, 1.65rem);
  --fs-5: clamp(2rem, 1.3rem + 2.7vw, 3.6rem);
  --fs-6: clamp(2.3rem, 1.5rem + 4.4vw, 4.6rem);   /* scales down below 390px so a long headline word fits a small phone */

  --lh-body:  1.6;
  --lh-tight: 1.04;
  --ds: 1;          /* display size scale, per type */
  --ds-h3: 1;
  --mark-w: .62;    /* width of one capital, in em, for the footer mark */
  --display-case: none;
  --ls-display: .005em;
  --ls-caps:  .06em;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;   --sp-5: 1.5rem;
  --sp-6: 2rem;   --sp-7: 2.75rem; --sp-8: 4rem;  --sp-9: 5.5rem; --sp-10: 7.5rem;

  --wrap: 76rem;
  --gutter: 1rem;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --header-h: 4.75rem;
  --logo-h: 3rem;
  --logo-h-lg: 3.9rem;
  --logo-art-h: 3.5rem;      /* a drawn logo carries the name in its lettering, so it shows larger */
  --logo-art-h-lg: 4.25rem;
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #DDE3EA 44%, #9AA6B5 52%, #F1F4F8 100%); /* the name beside a drawn logo picture */
  --badge: 2.75rem;

  --shadow-sm: 0 2px 8px -3px rgba(15,19,24,.18);
  --shadow-md: 0 14px 30px -18px rgba(15,19,24,.45);
  --shadow-lg: 0 26px 60px -28px rgba(15,19,24,.6);

  --t-fast: .18s ease;
  --t-slow: .5s cubic-bezier(.22,.61,.36,1);
}