/* ============================================================
   ASAL Cloud — shared theme layer (dark mode + theme toggle)
   Linked AFTER each page's inline <style>. Dark overrides key
   off the shared DS token names, so every page inherits them.
   Activate with <html data-theme="dark">.
   ============================================================ */

/* ---- Dark token palette ---- */
html[data-theme="dark"]{
  --bg:#070B11;
  --surface:#101A26;
  --navy:#0B1622;
  --navy-hover:#182636;
  --ink-900:#F2F6FC;
  --ink-700:#C4CDDA;
  --ink-500:#8A94A4;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --shadow-subtle:0 2px 24px rgba(0,0,0,.45);
  --shadow-soft:0 6px 18px rgba(0,0,0,.45);
  --shadow-card:0 14px 36px rgba(0,0,0,.55);
  --shadow-hero:0 24px 64px rgba(0,0,0,.6);
  --shadow-cta-yellow:0 8px 22px rgba(255,196,0,.30);
  --shadow-cta-dark:0 10px 26px rgba(0,0,0,.6);
  --success-bg:rgba(17,141,87,.18);
  --info-bg:rgba(23,92,211,.18);
  --warn-bg:rgba(181,71,8,.20);
  --error-bg:rgba(217,44,32,.18);
  color-scheme:dark;
}

/* ---- Dark fixes for DS components that hardcode light colors ---- */
html[data-theme="dark"] .nav,
html[data-theme="dark"] .fnav{background:rgba(11,18,28,.82)}
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea{background:#0C1521;color:var(--ink-900);border-color:var(--line-strong)}
/* outline button hardcodes a white fill — invert it for dark */
html[data-theme="dark"] .btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink-900)}
html[data-theme="dark"] .btn-outline:hover{background:#fff;border-color:#fff;color:#0A0F16}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder{color:rgba(255,255,255,.34)}
html[data-theme="dark"] .badge-shape,
html[data-theme="dark"] .rm-ico,
html[data-theme="dark"] .ico{background:#19283A}
html[data-theme="dark"] .process,
html[data-theme="dark"] footer{border-top:1px solid var(--line)}
html[data-theme="dark"] .cta-band{border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .trust-logos span{opacity:.75}
/* keep the navy promo/announce bands readable in dark */
html[data-theme="dark"] .announce{background:#0B1622}

/* ---- logo swap: dark-text lockup in light, white lockup in dark ---- */
.logo-on-dark{display:none!important}
html[data-theme="dark"] .logo-on-light{display:none!important}
html[data-theme="dark"] .logo-on-dark{display:block!important}
/* unified logo size — both lockups share the same high-res crop/proportions */
.nav .logo-on-light,.nav .logo-on-dark,.fnav .logo-on-light,.fnav .logo-on-dark,
header .logo-on-light,header .logo-on-dark{height:34px!important;width:auto;max-width:none}
/* the lockup is wide — never let flex shrink/distort it */
.nav .home,.fnav .home,.nav .wrap>a:first-child,.fnav .wrap>a:first-child{flex:0 0 auto}
@media(max-width:560px){
  .nav .logo-on-light,.nav .logo-on-dark,.fnav .logo-on-light,.fnav .logo-on-dark,
  header .logo-on-light,header .logo-on-dark{height:28px!important}
  .nav .wrap,.fnav .wrap{gap:14px}
  .nav .btn-yellow{display:none}}

/* smooth, restrained transition on toggle (no flash on first paint —
   the inline head script sets the theme before render) */
body,.nav,.fnav,.svc,.badge-card,.fund,.rm,.hero-stat,.form-card,
.input,.select,.textarea,.cta-band,.step,.trust{
  transition:background-color .28s var(--ease-std,ease),border-color .28s var(--ease-std,ease),color .28s var(--ease-std,ease)}

/* ============ AWS logo mark (inline symbol; wordmark = currentColor, smile = AWS orange) ============ */
.aws-logo{height:1em;width:1em;display:inline-block;vertical-align:-.14em;flex:none}
.aws-logo.aws-lg{height:1.45em;width:1.45em;vertical-align:-.32em}
.aws-logo.aws-xl{height:30px;width:30px;vertical-align:middle}

/* ============ theme toggle button (shared) ============ */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid var(--line-strong);border-radius:10px;background:transparent;color:var(--ink-700);
  cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.theme-toggle:hover{border-color:var(--yellow);color:var(--ink-900)}
.theme-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .t-moon{display:block}
.theme-toggle .t-sun{display:none}
html[data-theme="dark"] .theme-toggle .t-moon{display:none}
html[data-theme="dark"] .theme-toggle .t-sun{display:block}
