/* ==========================================================================
   The Buddy System — shared design system
   Derived from the palette the five apps already ship (aliabdaal.com lineage):
   warm cream canvas, near-black plum ink, candy-pastel accents, 20px cards,
   pill buttons with DARK text on pastel fills, soft serif display face,
   rounded sans body, hand-drawn squiggle underlines.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Canvas + ink */
  --cream:        #F9F6F3;
  --cream-deep:   #F3EDE9;
  --card:         #FFFFFF;
  --beige:        #ECE5E1;
  --beige-deep:   #E0D5CE;
  --ink:          #1B1624;
  --ink-muted:    #54505B;
  --ink-faint:    #8D8A91;

  /* Candy pastels — the family accent set */
  --coral:        #FD976D;
  --coral-deep:   #E86A3C;
  --butter:       #FDD46B;
  --butter-deep:  #E9B63C;
  --sky:          #5DCDF1;
  --sky-deep:     #2FA9D2;
  --mint:         #79D287;
  --mint-deep:    #4CAE5D;
  --lavender:     #C9B1FB;
  --lavender-deep:#9C7BE8;

  /* Per-app accent assignments */
  --tea:            var(--mint);
  --tea-deep:       var(--mint-deep);
  --coffee:         var(--coral);
  --coffee-deep:    var(--coral-deep);
  --transformation: var(--lavender);
  --transformation-deep: var(--lavender-deep);
  --tminus90:       var(--sky);
  --tminus90-deep:  var(--sky-deep);
  --book:           var(--butter);
  --book-deep:      var(--butter-deep);

  /* Text that sits on a pastel fill is always the dark ink, never white */
  --on-accent:    #1B1624;

  --shadow-soft:  0 2px 10px rgba(224, 216, 208, .55);
  --shadow-card:  0 6px 24px rgba(107, 94, 120, .10);
  --shadow-lift:  0 14px 38px rgba(107, 94, 120, .17);

  --r-card:  20px;
  --r-tile:  14px;
  --r-chip:  999px;

  --display: "Fraunces", "New York", Georgia, "Times New Roman", serif;
  --body:    "Nunito", ui-rounded, "SF Pro Rounded", -apple-system,
             BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --wrap: 1120px;
  --gut:  24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:      #17131F;
    --cream-deep: #1F1A29;
    --card:       #241E30;
    --beige:      #2E2739;
    --beige-deep: #3A3247;
    --ink:        #F3EDE9;
    --ink-muted:  #B5B0BC;
    --ink-faint:  #8D8A91;
    --shadow-soft: 0 2px 10px rgba(0,0,0,.35);
    --shadow-card: 0 6px 24px rgba(0,0,0,.40);
    --shadow-lift: 0 14px 38px rgba(0,0,0,.50);
  }
}
:root[data-theme="dark"] {
  --cream:      #17131F;
  --cream-deep: #1F1A29;
  --card:       #241E30;
  --beige:      #2E2739;
  --beige-deep: #3A3247;
  --ink:        #F3EDE9;
  --ink-muted:  #B5B0BC;
  --ink-faint:  #8D8A91;
  --shadow-soft: 0 2px 10px rgba(0,0,0,.35);
  --shadow-card: 0 6px 24px rgba(0,0,0,.40);
  --shadow-lift: 0 14px 38px rgba(0,0,0,.50);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.12rem; }
p  { margin: 0 0 1.1em; }
.lede { font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: var(--ink-muted); line-height: 1.6; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: .92rem; }
.center { text-align: center; }
strong, b { font-weight: 700; }

/* Hand-drawn squiggle underline, the aliabdaal signature.
   Drawn as a background on the inline box with box-decoration-break: clone, so
   a heading that wraps gets a squiggle under every line instead of one
   stretched across the block — and, unlike an absolutely positioned ::after,
   it never forces the heading onto a single unbreakable line. */
.squiggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c22-6 38 3 60-1.5S104 1 126 5.5s50 1 72-2.5' fill='none' stroke='%23FD976D' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .32em;
  padding-bottom: .26em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.squiggle--sky    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c22-6 38 3 60-1.5S104 1 126 5.5s50 1 72-2.5' fill='none' stroke='%235DCDF1' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.squiggle--mint   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c22-6 38 3 60-1.5S104 1 126 5.5s50 1 72-2.5' fill='none' stroke='%2379D287' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.squiggle--lav    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c22-6 38 3 60-1.5S104 1 126 5.5s50 1 72-2.5' fill='none' stroke='%23C9B1FB' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.squiggle--butter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c22-6 38 3 60-1.5S104 1 126 5.5s50 1 72-2.5' fill='none' stroke='%23FDD46B' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gut) * 2), 760px); margin-inline: auto; }
section { padding: clamp(52px, 8vw, 104px) 0; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--center { justify-content: center; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .78em 1.5em;
  border-radius: var(--r-chip);
  border: 2px solid transparent;
  background: var(--coral);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: 0 3px 0 rgba(27, 22, 36, .12);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(27, 22, 36, .14); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(27, 22, 36, .14); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn--sky    { background: var(--sky); }
.btn--mint   { background: var(--mint); }
.btn--butter { background: var(--butter); }
.btn--lav    { background: var(--lavender); }
.btn--ghost  { background: transparent; border-color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--beige); box-shadow: none; transform: translateY(-2px); }
.btn--sm { padding: .55em 1.05em; font-size: .92rem; }
.btn--lg { padding: .95em 1.9em; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: var(--shadow-soft); }
a.card, .card--link { text-decoration: none; display: block; transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover, .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .32em .82em;
  border-radius: var(--r-chip);
  background: var(--beige);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
}
.chip--coral  { background: color-mix(in srgb, var(--coral) 42%, var(--cream)); }
.chip--sky    { background: color-mix(in srgb, var(--sky) 42%, var(--cream)); }
.chip--mint   { background: color-mix(in srgb, var(--mint) 42%, var(--cream)); }
.chip--butter { background: color-mix(in srgb, var(--butter) 48%, var(--cream)); }
.chip--lav    { background: color-mix(in srgb, var(--lavender) 46%, var(--cream)); }

/* --- Header / nav ------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--beige);
}
.site-head__inner { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 1.16rem;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.brand__mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--coral), var(--butter) 55%, var(--sky));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.nav { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.nav a {
  padding: .45em .8em; border-radius: var(--r-chip);
  text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--ink-muted);
}
.nav a:hover { background: var(--beige); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--beige); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; border-radius: 10px; }
.nav-toggle:hover { background: var(--beige); }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--cream); border-bottom: 1px solid var(--beige);
    padding: 10px var(--gut) 18px; margin-left: 0;
  }
  .nav[data-open="false"] { display: none; }
  .nav a { padding: .7em .8em; }
}

/* --- Footer ------------------------------------------------------------- */
.site-foot { background: var(--cream-deep); border-top: 1px solid var(--beige); padding: 54px 0 34px; margin-top: 40px; }
.site-foot a { color: var(--ink-muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-grid h4 { font-family: var(--body); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .7em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .35em; }
.foot-base { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--beige-deep); font-size: .88rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }

/* --- Notice / alert ----------------------------------------------------- */
.notice {
  border-radius: var(--r-tile);
  padding: 14px 18px;
  background: color-mix(in srgb, var(--sky) 22%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--sky) 44%, var(--cream));
  font-size: .95rem;
}
.notice--warn { background: color-mix(in srgb, var(--butter) 30%, var(--cream)); border-color: color-mix(in srgb, var(--butter) 55%, var(--cream)); }
.notice--bad  { background: color-mix(in srgb, var(--coral) 26%, var(--cream)); border-color: color-mix(in srgb, var(--coral) 50%, var(--cream)); }
.notice--good { background: color-mix(in srgb, var(--mint) 26%, var(--cream)); border-color: color-mix(in srgb, var(--mint) 48%, var(--cream)); }

/* --- Forms -------------------------------------------------------------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35em; }
.input {
  width: 100%;
  padding: .72em .95em;
  border-radius: var(--r-tile);
  border: 2px solid var(--beige-deep);
  background: var(--card);
  color: var(--ink);
}
.input:focus { outline: none; border-color: var(--sky-deep); }

/* --- Utilities ---------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--card); padding: .6em 1em; border-radius: 10px;
  box-shadow: var(--shadow-card); text-decoration: none; font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }