/* GRX10 Aurora LIGHT theme ("Lilac Mist") + theme toggle.
   GENERATED by scratchpad/aurora/light/gen_css.py - edit the generator, not this file.
   Loads after aurora.css. Dark ("Magenta Aurora") is the default on :root (aurora.css);
   light applies on html[data-theme="light"], or via prefers-color-scheme when no explicit
   choice is stored. theme.js + the inline head snippet set data-theme before paint. */

/* ===== 1. Light tokens ===== */

html[data-theme="light"]{
  color-scheme: light;
  --background: #F4F1FB;
  --background-2: #EFEBF8;
  --foreground: #1C1430;
  --foreground-2: #3A3150;
  --muted-foreground: #6B5F85;
  --subtle-foreground: #8A7FA3;
  --card: #FFFFFF;
  --card-2: #FAF8FE;
  --popover: #FFFFFF;
  --accent: #EEE8FA;
  --border: #E3DCEF;
  --border-strong: #D3C9E6;
  --input: #E3DCEF;
  --primary: #E11B8C;
  --primary-hover: #C8157C;
  --primary-foreground: #FFFFFF;
  --link: #C2187A;
  --ring: #E11B8C;
  --success: #15803D;
  --success-bg: #DCFCE7;
  --warning: #B45309;
  --warning-bg: #FEF3C7;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --violet: #7C3AED;
  --gradient-brand: linear-gradient(120deg,#E11B8C,#7C3AED);
  --gradient-edge: linear-gradient(120deg,#E11B8C,#F0ABFC,#7C3AED);
  --glass-chrome: rgb(255 255 255 / .6);
  --glass-panel: rgb(255 255 255 / .8);
  --glass-border: rgb(255 255 255 / .85);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 1);
  --elev: 0 1px 2px rgb(26 21 48/.07), 0 10px 28px -18px rgb(26 21 48/.2);
  --elev-overlay: 0 16px 40px -16px rgb(26 21 48/.35);
  --aurora-1: rgb(233 30 140/.35);
  --aurora-2: rgb(124 58 237/.3);
  --aurora-3: rgb(240 171 252/.5);
  --aurora-opacity: .42;
  /* Phase 1 helper tokens (aurora.css), light values */
  --overlay-rgb: 28 20 48;
  --shadow-rgb: 26 21 48;
  --background-rgb: 244 241 251;
  --card-rgb: 255 255 255;
  --primary-rgb: 225 27 140;
  --link-rgb: 194 24 122;
  --violet-rgb: 124 58 237;
  --success-rgb: 21 128 61;
  --warning-rgb: 180 83 9;
  --danger-rgb: 185 28 28;
  --info-rgb: 37 99 235;
  --success-bar: #16A34A; --warning-bar: #D97706; --danger-bar: #DC2626; --neutral-bar: #D5DAE3;
  --info: #1D4ED8; --info-bar: #3B82F6;
  --violet-soft: #7C3AED;
  --gradient-soft: linear-gradient(120deg,var(--link),var(--violet-soft));
  --input-bg: #FFFFFF;
  --primary-button: #E11B8C; --primary-button-hover: #C8157C;   /* AA_FIX darkens these */
  --scrim: rgb(28 20 48 / .38);
  /* Phase 1 box system: derived tokens resolve by themselves; only the dark-tuned
     highlight/ring/shadow stack is retuned for a light ground (kit --elev scale) */
  --bx-lit: linear-gradient(180deg,rgb(255 255 255 / .7) 0%,rgb(255 255 255 / 0) 55%);
  --bx-hi: inset 0 1px 0 rgb(255 255 255 / 1);
  --bx-ring: 0 0 0 1px rgb(26 21 48 / .03);
  --bx-sh-1: 0 1px 2px rgb(26 21 48 / .06),0 8px 20px -14px rgb(26 21 48 / .18);
  --bx-sh-2: 0 1px 2px rgb(26 21 48 / .07),0 10px 28px -18px rgb(26 21 48 / .22),0 24px 48px -28px rgb(26 21 48 / .18);
  --bx-sh-3: 0 2px 4px rgb(26 21 48 / .07),0 16px 40px -16px rgb(26 21 48 / .28),0 40px 80px -40px rgb(26 21 48 / .25);
}

@media (prefers-color-scheme: light){
html:not([data-theme="dark"]){
  color-scheme: light;
  --background: #F4F1FB;
  --background-2: #EFEBF8;
  --foreground: #1C1430;
  --foreground-2: #3A3150;
  --muted-foreground: #6B5F85;
  --subtle-foreground: #8A7FA3;
  --card: #FFFFFF;
  --card-2: #FAF8FE;
  --popover: #FFFFFF;
  --accent: #EEE8FA;
  --border: #E3DCEF;
  --border-strong: #D3C9E6;
  --input: #E3DCEF;
  --primary: #E11B8C;
  --primary-hover: #C8157C;
  --primary-foreground: #FFFFFF;
  --link: #C2187A;
  --ring: #E11B8C;
  --success: #15803D;
  --success-bg: #DCFCE7;
  --warning: #B45309;
  --warning-bg: #FEF3C7;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --violet: #7C3AED;
  --gradient-brand: linear-gradient(120deg,#E11B8C,#7C3AED);
  --gradient-edge: linear-gradient(120deg,#E11B8C,#F0ABFC,#7C3AED);
  --glass-chrome: rgb(255 255 255 / .6);
  --glass-panel: rgb(255 255 255 / .8);
  --glass-border: rgb(255 255 255 / .85);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 1);
  --elev: 0 1px 2px rgb(26 21 48/.07), 0 10px 28px -18px rgb(26 21 48/.2);
  --elev-overlay: 0 16px 40px -16px rgb(26 21 48/.35);
  --aurora-1: rgb(233 30 140/.35);
  --aurora-2: rgb(124 58 237/.3);
  --aurora-3: rgb(240 171 252/.5);
  --aurora-opacity: .42;
  /* Phase 1 helper tokens (aurora.css), light values */
  --overlay-rgb: 28 20 48;
  --shadow-rgb: 26 21 48;
  --background-rgb: 244 241 251;
  --card-rgb: 255 255 255;
  --primary-rgb: 225 27 140;
  --link-rgb: 194 24 122;
  --violet-rgb: 124 58 237;
  --success-rgb: 21 128 61;
  --warning-rgb: 180 83 9;
  --danger-rgb: 185 28 28;
  --info-rgb: 37 99 235;
  --success-bar: #16A34A; --warning-bar: #D97706; --danger-bar: #DC2626; --neutral-bar: #D5DAE3;
  --info: #1D4ED8; --info-bar: #3B82F6;
  --violet-soft: #7C3AED;
  --gradient-soft: linear-gradient(120deg,var(--link),var(--violet-soft));
  --input-bg: #FFFFFF;
  --primary-button: #E11B8C; --primary-button-hover: #C8157C;   /* AA_FIX darkens these */
  --scrim: rgb(28 20 48 / .38);
  /* Phase 1 box system: derived tokens resolve by themselves; only the dark-tuned
     highlight/ring/shadow stack is retuned for a light ground (kit --elev scale) */
  --bx-lit: linear-gradient(180deg,rgb(255 255 255 / .7) 0%,rgb(255 255 255 / 0) 55%);
  --bx-hi: inset 0 1px 0 rgb(255 255 255 / 1);
  --bx-ring: 0 0 0 1px rgb(26 21 48 / .03);
  --bx-sh-1: 0 1px 2px rgb(26 21 48 / .06),0 8px 20px -14px rgb(26 21 48 / .18);
  --bx-sh-2: 0 1px 2px rgb(26 21 48 / .07),0 10px 28px -18px rgb(26 21 48 / .22),0 24px 48px -28px rgb(26 21 48 / .18);
  --bx-sh-3: 0 2px 4px rgb(26 21 48 / .07),0 16px 40px -16px rgb(26 21 48 / .28),0 40px 80px -40px rgb(26 21 48 / .25);
}
}


/* ===== 1b. WCAG AA adjustments (light). Not in TOKENS.md: --subtle-foreground darkened to pass 4.5:1 on every light surface incl. --accent; --primary-button #C8157C (white 5.45:1) / hover #B0126D. Set AA_FIX=False in gen_css.py to drop. ===== */

html[data-theme="light"]{
  --subtle-foreground: #70648A;
  --primary-button: #C8157C;
  --primary-button-hover: #B0126D;
}
@media (prefers-color-scheme: light){
html:not([data-theme="dark"]){
  --subtle-foreground: #70648A;
  --primary-button: #C8157C;
  --primary-button-hover: #B0126D;
}
}


/* ===== 2. Light component overrides (explicit choice) ===== */

/* Most components are tokenised by Phase 1 (aurora.css, with !important), so light needs
   only the cases tokens can't express. Gradient text: h1 keeps --gradient-brand (min 3.97:1
   at the pink stop; passes 3:1 for large text), so no override. */

/* nav on mobile: the build drops backdrop-filter there, so 60% glass would let content
   show through; use a near-solid lavender wash instead */
@media (max-width:760px),(pointer:coarse){html[data-theme="light"] .nav.scrolled{background:rgb(var(--background-rgb)/.94)!important}}
/* solid: the page's .98 translucent menu visibly ghosts the hero through it in both themes */
html[data-theme="light"] .mobile-menu{background:var(--background)!important}

/* client logo walls: white-filtered on dark -> dark monochrome on light
   (most client files are white-on-transparent, so "original" would vanish) */
html[data-theme="light"] .lg-img,html[data-theme="light"] .crm-img,html[data-theme="light"] [data-logo-wall] img{filter:brightness(0)!important;opacity:.6!important}
/* text wordmarks in the home customer strip sit at .78 opacity: too faint on white */
html[data-theme="light"] .cust{opacity:.92}
html[data-theme="light"] .lg-img:hover,html[data-theme="light"] .crm-img:hover,html[data-theme="light"] [data-logo-wall] img:hover{opacity:.85!important}

/* NVIDIA Inception badge + ET BrandEquity sit on a white tile: outline it on a white card */
html[data-theme="light"] .recog-logo{box-shadow:inset 0 0 0 1px var(--border)}

/* legal/404 chrome CSS lives in the build script (DF_DOC_CSS) with hardcoded dark-theme colours */
html[data-theme="light"] .legal-doc .wrap{color:var(--foreground-2)}
html[data-theme="light"] .legal-doc h1,html[data-theme="light"] .legal-doc h2,html[data-theme="light"] .legal-doc h3,html[data-theme="light"] .legal-doc strong,html[data-theme="light"] .legal-doc b,html[data-theme="light"] .legal-doc th{color:var(--foreground)}
html[data-theme="light"] .legal-doc a{color:var(--link)}
html[data-theme="light"] .legal-doc .legal-back:hover{color:var(--foreground)}
html[data-theme="light"] .legal-doc a.btn{color:var(--foreground)}
html[data-theme="light"] .legal-doc a.btn-primary{color:var(--primary-foreground)}
html[data-theme="light"] .legal-doc code{background:var(--accent)!important;color:var(--foreground)}

/* home hero verb strip: the reduced-motion rule paints the words in --primary-foreground
   (white in both themes) over the gradient clip; on light that is white-on-lavender */
@media (prefers-reduced-motion:reduce){html[data-theme="light"] .verb .word{color:var(--foreground)!important}}

/* green/pink text on 10% tints of itself lands at 4.2-4.5:1 on white; use the solid tint tokens */
html[data-theme="light"] .pillst.st-won,html[data-theme="light"] .pillst.st-conv,html[data-theme="light"] .st-conv,html[data-theme="light"] .callrow .oc{background:var(--success-bg)!important}
html[data-theme="light"] .callrow .lg{background:var(--accent)!important}
html[data-theme="light"] pre{background:var(--card-2);color:var(--foreground);border:1px solid var(--border)}

/* images/illustrations drawn for a dark ground: opt-in hooks */
html[data-theme="light"] .invert-on-light{filter:invert(1) hue-rotate(180deg)}
html[data-theme="light"] .dark-only{display:none!important}

/* Voice AI concierge widget (styles injected by concierge.js at runtime, hardcoded dark) */
html[data-theme="light"] .grxc-btn{box-shadow:0 8px 22px -10px rgb(var(--primary-rgb)/.55)}
html[data-theme="light"] .grxc-panel{background:var(--popover);border-color:var(--border);color:var(--foreground);box-shadow:var(--elev-overlay),var(--elev)}
html[data-theme="light"] .grxc-head{border-bottom-color:var(--border)}
html[data-theme="light"] .grxc-sub,html[data-theme="light"] .grxc-timer{color:var(--link)}
html[data-theme="light"] .grxc-head .x,html[data-theme="light"] .grxc-status,html[data-theme="light"] .grxc-acclabel,html[data-theme="light"] .grxc-note{color:var(--muted-foreground)}
html[data-theme="light"] .grxc-voices button{color:var(--foreground-2);background:var(--card-2);border-color:var(--border-strong)}
html[data-theme="light"] .grxc-voices button.on{color:var(--primary-foreground);border-color:transparent}
html[data-theme="light"] .grxc-cta.stop{background:var(--accent);border-color:var(--border-strong);color:var(--foreground)}
html[data-theme="light"] .grxc-orb{box-shadow:0 8px 30px -6px rgb(var(--primary-rgb)/.45)}

html[data-theme="light"] .grxc-cta,html[data-theme="light"] .grxc-voices button.on{background:var(--primary-button)!important}

/* ===== 2b. Same overrides for system light when no explicit choice ===== */
@media (prefers-color-scheme: light){

/* Most components are tokenised by Phase 1 (aurora.css, with !important), so light needs
   only the cases tokens can't express. Gradient text: h1 keeps --gradient-brand (min 3.97:1
   at the pink stop; passes 3:1 for large text), so no override. */

/* nav on mobile: the build drops backdrop-filter there, so 60% glass would let content
   show through; use a near-solid lavender wash instead */
@media (max-width:760px),(pointer:coarse){html:not([data-theme="dark"]) .nav.scrolled{background:rgb(var(--background-rgb)/.94)!important}}
/* solid: the page's .98 translucent menu visibly ghosts the hero through it in both themes */
html:not([data-theme="dark"]) .mobile-menu{background:var(--background)!important}

/* client logo walls: white-filtered on dark -> dark monochrome on light
   (most client files are white-on-transparent, so "original" would vanish) */
html:not([data-theme="dark"]) .lg-img,html:not([data-theme="dark"]) .crm-img,html:not([data-theme="dark"]) [data-logo-wall] img{filter:brightness(0)!important;opacity:.6!important}
/* text wordmarks in the home customer strip sit at .78 opacity: too faint on white */
html:not([data-theme="dark"]) .cust{opacity:.92}
html:not([data-theme="dark"]) .lg-img:hover,html:not([data-theme="dark"]) .crm-img:hover,html:not([data-theme="dark"]) [data-logo-wall] img:hover{opacity:.85!important}

/* NVIDIA Inception badge + ET BrandEquity sit on a white tile: outline it on a white card */
html:not([data-theme="dark"]) .recog-logo{box-shadow:inset 0 0 0 1px var(--border)}

/* legal/404 chrome CSS lives in the build script (DF_DOC_CSS) with hardcoded dark-theme colours */
html:not([data-theme="dark"]) .legal-doc .wrap{color:var(--foreground-2)}
html:not([data-theme="dark"]) .legal-doc h1,html:not([data-theme="dark"]) .legal-doc h2,html:not([data-theme="dark"]) .legal-doc h3,html:not([data-theme="dark"]) .legal-doc strong,html:not([data-theme="dark"]) .legal-doc b,html:not([data-theme="dark"]) .legal-doc th{color:var(--foreground)}
html:not([data-theme="dark"]) .legal-doc a{color:var(--link)}
html:not([data-theme="dark"]) .legal-doc .legal-back:hover{color:var(--foreground)}
html:not([data-theme="dark"]) .legal-doc a.btn{color:var(--foreground)}
html:not([data-theme="dark"]) .legal-doc a.btn-primary{color:var(--primary-foreground)}
html:not([data-theme="dark"]) .legal-doc code{background:var(--accent)!important;color:var(--foreground)}

/* home hero verb strip: the reduced-motion rule paints the words in --primary-foreground
   (white in both themes) over the gradient clip; on light that is white-on-lavender */
@media (prefers-reduced-motion:reduce){html:not([data-theme="dark"]) .verb .word{color:var(--foreground)!important}}

/* green/pink text on 10% tints of itself lands at 4.2-4.5:1 on white; use the solid tint tokens */
html:not([data-theme="dark"]) .pillst.st-won,html:not([data-theme="dark"]) .pillst.st-conv,html:not([data-theme="dark"]) .st-conv,html:not([data-theme="dark"]) .callrow .oc{background:var(--success-bg)!important}
html:not([data-theme="dark"]) .callrow .lg{background:var(--accent)!important}
html:not([data-theme="dark"]) pre{background:var(--card-2);color:var(--foreground);border:1px solid var(--border)}

/* images/illustrations drawn for a dark ground: opt-in hooks */
html:not([data-theme="dark"]) .invert-on-light{filter:invert(1) hue-rotate(180deg)}
html:not([data-theme="dark"]) .dark-only{display:none!important}

/* Voice AI concierge widget (styles injected by concierge.js at runtime, hardcoded dark) */
html:not([data-theme="dark"]) .grxc-btn{box-shadow:0 8px 22px -10px rgb(var(--primary-rgb)/.55)}
html:not([data-theme="dark"]) .grxc-panel{background:var(--popover);border-color:var(--border);color:var(--foreground);box-shadow:var(--elev-overlay),var(--elev)}
html:not([data-theme="dark"]) .grxc-head{border-bottom-color:var(--border)}
html:not([data-theme="dark"]) .grxc-sub,html:not([data-theme="dark"]) .grxc-timer{color:var(--link)}
html:not([data-theme="dark"]) .grxc-head .x,html:not([data-theme="dark"]) .grxc-status,html:not([data-theme="dark"]) .grxc-acclabel,html:not([data-theme="dark"]) .grxc-note{color:var(--muted-foreground)}
html:not([data-theme="dark"]) .grxc-voices button{color:var(--foreground-2);background:var(--card-2);border-color:var(--border-strong)}
html:not([data-theme="dark"]) .grxc-voices button.on{color:var(--primary-foreground);border-color:transparent}
html:not([data-theme="dark"]) .grxc-cta.stop{background:var(--accent);border-color:var(--border-strong);color:var(--foreground)}
html:not([data-theme="dark"]) .grxc-orb{box-shadow:0 8px 30px -6px rgb(var(--primary-rgb)/.45)}

html:not([data-theme="dark"]) .grxc-cta,html:not([data-theme="dark"]) .grxc-voices button.on{background:var(--primary-button)!important}

}


/* ===== Logo swap (both themes). The inactive variant is hidden; the active one keeps its own display. ===== */
html[data-theme="dark"] .logo-light{display:none!important}
html[data-theme="light"] .logo-dark{display:none!important}
@media not all and (prefers-color-scheme: light){html:not([data-theme="light"]) .logo-light{display:none!important}}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]) .logo-dark{display:none!important}}

/* ===== Theme toggle (both themes) ===== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;width:40px;height:40px;padding:0;border-radius:12px;border:1px solid var(--border-strong,rgba(255,255,255,.14));background:transparent;color:var(--muted-foreground,#B0B0C0);cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.theme-toggle:hover{color:var(--foreground,#fff);background:var(--accent,rgba(255,255,255,.05))}
.theme-toggle:focus-visible{outline:2px solid var(--ring,#E1198B);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px;flex:none}
.theme-toggle .tt-moon{display:none}
html[data-theme="light"] .theme-toggle .tt-sun{display:none}
html[data-theme="light"] .theme-toggle .tt-moon{display:block}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]) .theme-toggle .tt-sun{display:none}html:not([data-theme="dark"]) .theme-toggle .tt-moon{display:block}}
@media(max-width:560px){.nav-cta .theme-toggle{display:none}}
/* mobile-menu variant: full-width row with a text label */
.theme-toggle.tt-menu{width:100%;height:auto;border-radius:999px;margin-top:14px;padding:13px 16px;justify-content:flex-start;font:600 15px/1.2 var(--font-sans,'Archivo','Archivo Fallback',system-ui,sans-serif);color:var(--foreground-2,#B0B0C0);background:var(--card,rgba(255,255,255,.03))}
.theme-toggle.tt-menu .tt-label{flex:1;text-align:left}
/* no colour transitions while the theme flips */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}
@media (forced-colors: active){.theme-toggle{border-color:ButtonText}}