/* =============================================================================
   LH Webdesign — design tokens
   ---------------------------------------------------------------------------
   PER CLIENT: change only the values in the ":root — brand" block below, plus
   the font names in functions.php (lhwd_fonts_url) and base.css font stacks.
   Everything downstream is derived from these.
   ========================================================================== */

/* --- :root — brand (dark is the base palette) --------------------------------- */
:root {
  /* surfaces */
  --bg:          #05060A;
  --surface:     #0B0E16;
  --surface-2:   #10151F;
  --line:        #1B2230;
  --line-strong: #2A3342;

  /* text */
  --text:      #EEF2F8;
  --text-dim:  #9EB0C6;
  --text-mute: #6B7C93;

  /* brand */
  --sky:        #8DBFEA;
  --iris:       #9AA6E8;
  --brand-grad: linear-gradient(115deg, #8DBFEA 0%, #9AA6E8 100%);
  --glow:       #8DBFEA;
  --on-brand:   #05060A;

  /* derived / system */
  --photo-filter: contrast(1.02) saturate(1.02);
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 24px 60px -28px rgba(0,0,0,.75);
  --radius:   16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* layout */
  --maxw: 1200px;
  --gut:  clamp(20px, 5vw, 64px);

  /* fluid type scale */
  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.7rem, 1.9rem + 4vw, 5rem);
  --step-5:  clamp(3.3rem, 2rem + 6.5vw, 7.2rem);

  /* spacing rhythm */
  --space-section: clamp(56px, 9vh, 120px);
  --space-block:   clamp(32px, 5vh, 64px);

}

/* Re-point Divi's own typography variables at the design system. !important so
   these win over Divi's late-injected Customizer / critical CSS regardless of
   source order (custom properties accept !important). */
:root {
  --gcid-body-color:        var(--text-dim) !important;
  --gcid-heading-color:     var(--text) !important;
  --et_global_body_font:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --et_global_heading_font: "Bricolage Grotesque", "Hanken Grotesk", sans-serif !important;
}

:root:not([data-theme="light"]) { color-scheme: dark; }

/* --- light palette (system preference) --------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:          #F3F6FB;
    --surface:     #FFFFFF;
    --surface-2:   #EDF1F8;
    --line:        #DBE2EE;
    --line-strong: #C2CDDE;
    --text:        #0B111C;
    --text-dim:    #41506A;
    --text-mute:   #5B6A82;
    --sky:         #2F6DA8;
    --iris:        #5560C0;
    --brand-grad:  linear-gradient(115deg, #2F6DA8 0%, #5560C0 100%);
    --glow:        #7FA8D8;
    --on-brand:    #FFFFFF;
    --photo-filter: contrast(1.01) saturate(1.01);
    --shadow: 0 1px 0 rgba(255,255,255,.6), 0 30px 60px -34px rgba(30,50,90,.35);
    color-scheme: light;
  }
}

/* --- light palette (explicit toggle) --------------------------------------- */
:root[data-theme="light"] {
  --bg:          #F3F6FB;
  --surface:     #FFFFFF;
  --surface-2:   #EDF1F8;
  --line:        #DBE2EE;
  --line-strong: #C2CDDE;
  --text:        #0B111C;
  --text-dim:    #41506A;
  --text-mute:   #5B6A82;
  --sky:         #2F6DA8;
  --iris:        #5560C0;
  --brand-grad:  linear-gradient(115deg, #2F6DA8 0%, #5560C0 100%);
  --glow:        #7FA8D8;
  --on-brand:    #FFFFFF;
  --photo-filter: contrast(1.01) saturate(1.01);
  --shadow: 0 1px 0 rgba(255,255,255,.6), 0 30px 60px -34px rgba(30,50,90,.35);
  color-scheme: light;
}