/* tokens.css — A Girl & Her Futures™
 * Design tokens shared by every page. Include once per page, before
 * components.css and any page-specific stylesheet.
 *
 * Also include the shared font link in every page's <head>:
 * <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap" rel="stylesheet">
 */
:root{
  --pink:#F4829A;--pink-light:#F9B8C6;--pink-pale:#FDE8ED;
  --teal:#7ECEC4;--teal-light:#B2E4DF;--teal-pale:#E8F8F6;
  --peach:#F5A857;--peach-light:#FAD09A;--peach-pale:#FEF3E4;
  --purple:#7F77DD;--purple-light:#CECBF6;--purple-pale:#EEEDFE;
  --cream:#FDF8F5;--warm:#FFFBF9;--bg:#EDE7E2;
  --dark:#2C1810;--text:#3D2B20;--muted:#7A5C50;
  --border:#F1E7E1;--placeholder:#C9B9AE;
  --font-display:'Playfair Display',serif;
  --font-body:'DM Sans',sans-serif;
  /* Used only by the Share My Win quote-card variant. Its Google Fonts
   * <link> (family=Caveat:wght@600) is added only to the wins pages that
   * render that variant — not loaded globally — so it never affects any
   * other page's font-loading cost. */
  --font-script:'Caveat',cursive;
}

/* Page-to-page fade transitions are handled entirely by sidebar.js's own
 * click-intercept + opacity fade now, unconditionally on every browser —
 * this used to also lean on the browser's native cross-document
 * view-transition crossfade here, gated behind a feature check in
 * sidebar.js, but that platform feature wasn't visibly firing in
 * practice. Removed rather than left in place unused, since running both
 * at once (had the feature check ever been wrong) would double up into a
 * choppier fade instead of a smoother one. */

*{margin:0;padding:0;box-sizing:border-box;}
/* The browser's own [hidden]{display:none} UA-stylesheet rule has the same
 * specificity as any class selector — so a later-loaded rule that sets
 * `display` on the same element (e.g. .dd-primary-btn{display:inline-block},
 * .dd-secondary-btn{display:inline-flex}) silently wins the cascade and the
 * `hidden` attribute stops doing anything at all. Confirmed live: toggling
 * `.hidden = true/false` on the AGHF Agent's Send/Stop buttons (which carry
 * exactly those classes) had zero visual effect, leaving both permanently
 * visible together. `!important` here restores `hidden` as an unconditional
 * override, matching what every other site assumes it already does. */
[hidden]{display:none!important;}
html{background:var(--warm);}
/* Same soft radial-mesh wash used on the marketing site's hero sections
 * (agirlherfutures.com/bundle's .mesh), so the logged-in app reads as the
 * same product instead of a flatter, plainer shell. --bg itself stays a
 * flat color unchanged, since several components (status pills, image
 * placeholders) rely on it as a solid `background-color`. */
body{
  font-family:var(--font-body);color:var(--dark);
  background:
    radial-gradient(55% 40% at 8% 0%, var(--pink-pale) 0%, transparent 70%),
    radial-gradient(45% 35% at 100% 8%, var(--teal-pale) 0%, transparent 70%),
    radial-gradient(50% 40% at 40% 100%, var(--peach-pale) 0%, transparent 70%),
    var(--warm);
}
img{max-width:100%;}

/* auth-guard.js's loading overlay, shown while the auth check (and on a
 * slow connection, the page's own data-fetching JS) is in flight. Defined
 * here rather than inline since @keyframes can't be set via style.cssText. */
@keyframes aghfLoaderPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.14);opacity:.72;}}
@media(prefers-reduced-motion:reduce){#aghfLoader > div:first-child{animation:none!important;}}