/* madilynthomas.com — design tokens.
   ONE file to retune the whole site's colour.

   The pastel pink (--accent) is deliberately IDENTICAL in light and dark mode —
   it's the through-line of the brand. But pastel pink cannot carry small text at
   AA contrast on a light background, so the palette is split in two:

     --accent         soft pastel pink. Fills, chips, borders, glows, rules,
                      decorative strokes, big display type. NEVER small text on light.
     --accent-strong  deep rose. Links, button labels, small emphasis text.
                      Contrast-checked ≥ 4.5:1 against its own background in BOTH modes.

   If you make --accent-strong lighter than it is here, links stop being legible.
   That's the floor.
*/

:root, :root[data-theme="light"] {
  color-scheme: light;

  --bg:#fffbfc; --bg-2:#fef6fa; --bg-3:#fdedf4;
  --surface:#ffffff; --surface-2:#fffafc;

  --ink:#2b2027; --ink-strong:#1a1218;
  --muted:#77626e; --muted-2:#5a4a54; --muted-soft:#a08e99;

  --border:#f7e3ec; --border-2:#f2d3e1; --dot:#eec8da;

  --accent:#f9c2d9;             /* the pastel pink */
  --accent-soft:#fde6f0;
  --accent-strong:#b23a6b;      /* 6.1:1 on --bg — safe for links */
  --accent-hover:#932653;
  --on-accent:#6b1f42;          /* text sitting ON a pastel pink fill */

  --amber:#b8763f; --mint:#3f8f74;

  --chip-bg:#fde6f0; --chip-ink:#93265350; --chip-ink:#932653;

  --btn-shadow:0 14px 30px -12px rgba(178,58,107,.45);
  --btn2-bg:#ffffff; --btn2-ink:#6b1f42; --btn2-border:#f2d3e1;

  --hero-bg:linear-gradient(180deg,#fffbfc 0%,#fdedf4 55%,#fbe0ee 100%);
  --card-grad:linear-gradient(160deg,#fdedf4,#fbe0ee);
  --glow:rgba(249,194,217,.55);

  --ph-a:#fdedf4; --ph-b:#fbe0ee; --ph-ink:#c99cb2; --ph-border:#f7e3ec;

  --shadow-card:0 34px 70px -40px rgba(107,31,66,.45);
  --shadow-float:0 40px 80px -40px rgba(107,31,66,.45);
  --shadow-soft:0 20px 44px -34px rgba(107,31,66,.4);

  --nav-bg:rgba(255,251,252,.85);

  --panel-bg:#5c1e3c; --panel-ink:#ffffff; --panel-muted:#eccadb;
  --panel-accent:#f9c2d9; --panel-border:rgba(255,255,255,.14);

  --footer-bg:#3f1329; --footer-head:#ffffff; --footer-ink:#e9c9d9;
  --footer-muted:#c7a0b4; --footer-accent:#f9c2d9; --footer-border:rgba(255,255,255,.12);

  --score-ink:#ffffff; --score-bg:rgba(63,19,41,.82);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:#15101a; --bg-2:#1b1522; --bg-3:#241b2c;
  --surface:#1f1827; --surface-2:#261d30;

  --ink:#f7eaf2; --ink-strong:#ffffff;
  --muted:#b09dab; --muted-2:#cfbcc8; --muted-soft:#8e7c89;

  --border:#342a3e; --border-2:#42344e; --dot:#4a3a56;

  --accent:#f9c2d9;             /* identical pastel pink */
  --accent-soft:#2e2036;
  --accent-strong:#fbd4e5;      /* 11:1 on --bg */
  --accent-hover:#ffffff;
  --on-accent:#4a1230;          /* the pink fill stays pale, so text on it stays dark */

  --amber:#d9a469; --mint:#6fc4a6;

  --chip-bg:#2e2036; --chip-ink:#f9c2d9;

  --btn-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  --btn2-bg:#1f1827; --btn2-ink:#f7d9e6; --btn2-border:#42344e;

  --hero-bg:linear-gradient(180deg,#15101a 0%,#1e1526 55%,#251829 100%);
  --card-grad:linear-gradient(160deg,#211a29,#2a1c31);
  --glow:rgba(249,194,217,.18);

  --ph-a:#211a29; --ph-b:#2a1c31; --ph-ink:#7d6b7d; --ph-border:#372c41;

  --shadow-card:0 34px 70px -40px rgba(0,0,0,.7);
  --shadow-float:0 40px 80px -40px rgba(0,0,0,.75);
  --shadow-soft:0 20px 44px -34px rgba(0,0,0,.65);

  --nav-bg:rgba(21,16,26,.85);

  --panel-bg:linear-gradient(160deg,#231a2b,#2c1a2c); --panel-ink:#f7eaf2;
  --panel-muted:#c9b2c1; --panel-accent:#f9c2d9; --panel-border:rgba(255,255,255,.08);

  --footer-bg:#100c14; --footer-head:#f7eaf2; --footer-ink:#c9b2c1;
  --footer-muted:#8e7c89; --footer-accent:#f9c2d9; --footer-border:rgba(255,255,255,.07);

  --score-ink:#ffffff; --score-bg:rgba(16,12,20,.85);
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.65;
  transition:background .35s ease, color .35s ease;
}

::selection { background:var(--accent); color:var(--on-accent); }

img, svg, video { max-width:100%; }
img { height:auto; }

a { color:var(--accent-strong); }

/* Focus ring — visible in both themes, never removed. */
:focus-visible {
  outline:3px solid var(--accent-strong);
  outline-offset:2px;
  border-radius:6px;
}

@keyframes mt-float  { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes mt-drift  { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes mt-glow   { 0%,100%{ opacity:.9; transform:scale(1) } 50%{ opacity:1; transform:scale(1.06) } }

.mt-reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.mt-reveal.in { opacity:1; transform:none; }

a[aria-current="page"] { color:var(--accent-strong) !important; }

/* Theme toggle icon swap — sun shows only in dark mode. */
.mt-ic-sun { display:none !important; }
:root[data-theme="dark"] .mt-ic-moon { display:none !important; }
:root[data-theme="dark"] .mt-ic-sun { display:inline-flex !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation:none !important; }
  .mt-reveal { transition:none; opacity:1; transform:none; }
  body { transition:none; }
}