/*
  Signal Emerald — final color tokens for istiquritconsultant.com
  Picked from the 10-palette WCAG-checked round; refined here for actual
  use on Clear Glass UI and long-form blog reading.

  Every text-on-solid-background pairing below is WCAG 2.1 verified
  (relative-luminance formula, not eyeballed) — ratios noted per token.
  Decorative tokens (borders, glass tints, shadows) are not text-contrast
  checked since nothing depends on them alone to convey information —
  interactive elements always carry a second cue (fill, underline, icon).

  DECISION (supersedes the original Liquid Glass system): the site moved
  100% to Clear Glass — real backdrop blur + a plain translucent tint +
  a thin bright border, nothing more. The old --glass-rim-chroma conic
  gradient and --glass-refraction (feTurbulence/feDisplacementMap bend)
  are gone; see assets/css/glass.css for the simplified component and
  [[feedback_liquid_glass_technique]] in project memory for why.
*/

:root{
  /* ---- Brand ---- */
  --color-brand-green:        #0E8F5E; /* graphic/UI use: buttons, icons, large text, chart lines */
  --color-brand-green-safe:   #0D8557; /* body-sized links on LIGHT backgrounds — 4.55:1 AA */
  --color-support:            #123B2C; /* glass tint base, secondary fills, dark-mode card gradients */

  /* ---- Dark mode (DEFAULT/PRIMARY — see config's DARK_MODE_PRIMARY and
     branding/logo/README.md: "dark is primary for this site"). The
     unguarded base MUST stay the dark palette so a visitor with no
     stated OS preference (or a browser that can't report one) sees the
     intended premium look, not a light fallback nobody chose. Explicit
     light preference/override lives below. ---- */
  --color-bg:            #0B1215; /* Midnight Abyss */
  --color-surface:       #0F171B;
  --color-ink:           #D8DEDA; /* body text — 13.84:1 on --color-bg (AAA) */
  --color-ink-muted:     #8FA69A; /* captions, meta, timestamps — 7.28:1 on --color-bg (AAA) */
  --color-border:        #26312B;
  --color-link:          var(--color-brand-green); /* 4.60:1 on dark — passes AA even at body size */
  --color-accent:        var(--color-brand-green);

  --glass-primary-bg:    linear-gradient(165deg, rgba(255,255,255,.08), rgba(18,59,44,.20) 55%, rgba(11,18,21,.35));
  --glass-primary-border: rgba(255,255,255,.18);
  --glass-primary-blur:  14px;
  --glass-secondary-bg:  rgba(11,18,21,.16);
  --glass-secondary-border: rgba(255,255,255,.16);
  --glass-secondary-blur: 8px;
  --glass-shadow:        0 12px 28px rgba(0,0,0,.32);
}

/* ---- Light mode — opt-in only: OS explicitly prefers light, or the
   pull-cord toggle (templates/partials/theme-toggle.php) sets
   data-theme="light"/"dark" explicitly and persists it in
   localStorage — see assets/js/theme-init.js. ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --color-bg:            #F9FDFE; /* Winter White */
    --color-surface:       #FFFFFF;
    --color-ink:           #14170F; /* body text — 17.69:1 on --color-bg (AAA) */
    --color-ink-muted:     #4B5650; /* captions, meta, timestamps — 7.47:1 on --color-bg (AAA) */
    --color-border:        #DADCD8;
    --color-link:          var(--color-brand-green-safe); /* 4.55:1 AA */
    --color-accent:        var(--color-brand-green);

    --glass-primary-bg:    linear-gradient(180deg, rgba(255,255,255,.6), rgba(199,232,213,.28) 55%, rgba(249,253,254,.35));
    --glass-primary-border: rgba(255,255,255,.8);
    --glass-primary-blur:  14px;
    --glass-secondary-bg:  rgba(255,255,255,.22);
    --glass-secondary-border: rgba(255,255,255,.65);
    --glass-secondary-blur: 8px;
    --glass-shadow:        0 10px 24px rgba(20,30,25,.08);
  }
}
:root[data-theme="light"]{
  --color-bg:            #F9FDFE;
  --color-surface:       #FFFFFF;
  --color-ink:           #14170F;
  --color-ink-muted:     #4B5650;
  --color-border:        #DADCD8;
  --color-link:          var(--color-brand-green-safe);
  --color-accent:        var(--color-brand-green);

  --glass-primary-bg:    linear-gradient(180deg, rgba(255,255,255,.6), rgba(199,232,213,.28) 55%, rgba(249,253,254,.35));
  --glass-primary-border: rgba(255,255,255,.8);
  --glass-primary-blur:  14px;
  --glass-secondary-bg:  rgba(255,255,255,.22);
  --glass-secondary-border: rgba(255,255,255,.65);
  --glass-secondary-blur: 8px;
  --glass-shadow:        0 10px 24px rgba(20,30,25,.08);
}
:root[data-theme="dark"]{
  --color-bg:            #0B1215;
  --color-surface:       #0F171B;
  --color-ink:           #D8DEDA;
  --color-ink-muted:     #8FA69A;
  --color-border:        #26312B;
  --color-link:          var(--color-brand-green);
  --color-accent:        var(--color-brand-green);

  --glass-primary-bg:    linear-gradient(165deg, rgba(255,255,255,.08), rgba(18,59,44,.20) 55%, rgba(11,18,21,.35));
  --glass-primary-border: rgba(255,255,255,.18);
  --glass-primary-blur:  14px;
  --glass-secondary-bg:  rgba(11,18,21,.16);
  --glass-secondary-border: rgba(255,255,255,.16);
  --glass-secondary-blur: 8px;
  --glass-shadow:        0 12px 28px rgba(0,0,0,.32);
}

/*
  Usage rule that makes the glass tiers WCAG-safe regardless of what
  sits behind them: --glass-primary-bg and --glass-secondary-bg are
  never fully transparent — each carries a solid --color-bg/--color-support
  tint UNDER the blur. Body-length text only ever sits on --glass-primary-*
  (or a fully solid --color-surface strip); --glass-secondary-* stays
  reserved for large headline text, which WCAG's large-text threshold
  (3:1) tolerates at lower contrast than body copy (4.5:1 / 7:1 AAA).
*/