/* ============================================================================
   Michael Ortiz — "Glass console" design system
   iOS-flavored bento grid. Translucent material cards over a slow CSS gradient
   mesh. Dark by default, light via [data-theme]. System fonts, no webfonts, no
   CDN. The only external resource anywhere is the Google Form iframe on support
   pages. Per-app identity flows from one [data-accent] attribute.
   Motion is CSS-first; the single JS file does only the theme toggle.
   ============================================================================ */

/* ---- tokens: dark (default) ---- */
:root {
  --bg:          #0b0d12;
  --bg-mesh-1:   #10131b;
  --bg-mesh-2:   #1a2030;
  --surface:     rgba(22, 26, 36, .72);
  --surface-solid: #161a24;
  --surface-2:   rgba(30, 35, 48, .85);
  --border:      rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .20);
  --text:        #f2f4f8;
  --text-soft:   #b7bdca;
  --text-faint:  #9197a6;
  --accent:      #7aa2ff;
  --accent-2:    #a988ff;
  --on-accent:   #0b0d12;
  /* link text: derive a contrast-tuned ink from whatever accent is in play */
  --accent-ink:  color-mix(in srgb, var(--accent) 52%, white);
  --shadow:      0 20px 50px rgba(0, 0, 0, .45);
  --glow:        0 0 0 1px var(--border-strong),
                 0 30px 60px -22px color-mix(in srgb, var(--accent) 45%, transparent);

  /* 8pt-ish spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px;
  --radius: 20px; --radius-sm: 12px; --radius-lg: 28px; --pill: 999px;

  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --dur-micro: 140ms; --dur: 240ms; --dur-enter: 600ms;

  --maxw: 980px; --maxw-doc: 720px;

  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  color-scheme: dark;
}

/* ---- tokens: light (explicit toggle, or system pref when not forced dark) ---- */
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) { color-scheme: light; }
}

/* shared light palette, applied for forced-light OR system-light-not-forced-dark */
:root[data-theme="light"],
html:not([data-theme="dark"]) {
  --light-bg:        #f4f5f8;
  --light-bg-mesh-1: #eaecf3;
  --light-bg-mesh-2: #dfe4f1;
  --light-surface:   rgba(255, 255, 255, .80);
  --light-surface-solid: #ffffff;
  --light-surface-2: rgba(245, 247, 251, .92);
  --light-border:    rgba(15, 20, 35, .10);
  --light-border-strong: rgba(15, 20, 35, .20);
  --light-text:      #11151d;
  --light-text-soft: #414855;
  --light-text-faint:#5d6473;
  --light-on-accent: #ffffff;
  --light-accent-ink: color-mix(in srgb, var(--accent) 78%, black);
  --light-shadow:    0 18px 44px rgba(20, 28, 50, .12);
}
:root[data-theme="light"] {
  --bg: var(--light-bg); --bg-mesh-1: var(--light-bg-mesh-1); --bg-mesh-2: var(--light-bg-mesh-2);
  --surface: var(--light-surface); --surface-solid: var(--light-surface-solid); --surface-2: var(--light-surface-2);
  --border: var(--light-border); --border-strong: var(--light-border-strong);
  --text: var(--light-text); --text-soft: var(--light-text-soft); --text-faint: var(--light-text-faint);
  --on-accent: var(--light-on-accent); --accent-ink: var(--light-accent-ink);
  --shadow: var(--light-shadow);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --bg: var(--light-bg); --bg-mesh-1: var(--light-bg-mesh-1); --bg-mesh-2: var(--light-bg-mesh-2);
    --surface: var(--light-surface); --surface-solid: var(--light-surface-solid); --surface-2: var(--light-surface-2);
    --border: var(--light-border); --border-strong: var(--light-border-strong);
    --text: var(--light-text); --text-soft: var(--light-text-soft); --text-faint: var(--light-text-faint);
    --on-accent: var(--light-on-accent); --accent-ink: var(--light-accent-ink);
    --shadow: var(--light-shadow);
  }
}

/* ---- per-app accents (set via data-accent on <body> or a .card) ---- */
[data-accent="lunaday"]   { --accent: #5b6cf0; --accent-2: #8b6cf0; }
[data-accent="sereni"]    { --accent: #2fb6b0; --accent-2: #37c6a0; }
[data-accent="fire-path"] { --accent: #e08a3c; --accent-2: #e0633c; }
[data-accent="echocare"]  { --accent: #3fae7a; --accent-2: #3fae9a; }
[data-accent="zoofriends"]{ --accent: #f08a4a; --accent-2: #f0b04a; }
[data-accent="streetcall"]{ --accent: #1f7a4d; --accent-2: #d4a017; }

/* ---- reset / base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  /* faint self-contained grain over the base */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-attachment: fixed;
  /* token color transition only after first paint (set by JS) to avoid flash */
}
html.theme-ready body,
html.theme-ready .topbar,
html.theme-ready .card,
html.theme-ready .sheet,
html.theme-ready .btn,
html.theme-ready .chip {
  transition: background-color var(--dur) var(--ease-soft),
              color var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft);
}

/* ---- animated gradient mesh (decorative, behind everything) ---- */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 4%,  var(--bg-mesh-2), transparent 60%),
    radial-gradient(50% 42% at 92% 8%,  color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    radial-gradient(45% 40% at 70% 100%, var(--bg-mesh-1), transparent 55%);
  animation: meshdrift 28s ease-in-out infinite alternate;
}
@keyframes meshdrift {
  to { transform: translate3d(0, -2.5%, 0) scale(1.06); }
}

/* ---- entrance: staggered fade-up (CSS only, fixed-delay classes) ---- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; animation: rise var(--dur-enter) var(--ease-spring) forwards; }
  .d1 { animation-delay: .04s; } .d2 { animation-delay: .10s; }
  .d3 { animation-delay: .16s; } .d4 { animation-delay: .22s; }
  .d5 { animation-delay: .28s; } .d6 { animation-delay: .34s; }
}

/* ---- skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface-solid); color: var(--text);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* ---- layout shell ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 5vw, 2rem) var(--sp-6); }
.wrap.doc { max-width: var(--maxw-doc); }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) clamp(1.1rem, 5vw, 2rem);
  background: var(--surface);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.wordmark { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); text-decoration: none; font-weight: 600; }
.wordmark .mono {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); font-family: var(--mono); font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.wordmark .name { font-size: .98rem; }

/* ---- theme toggle ---- */
.theme-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--pill);
  background: var(--surface-2); color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-soft),
              border-color var(--dur-micro) var(--ease-soft),
              filter var(--dur-micro) var(--ease-soft);
}
.theme-toggle:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
/* show the icon for the OPPOSITE of the active theme (the action it performs) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; }
  html:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }
}

/* ---- hero ---- */
.hero { padding: clamp(2.6rem, 9vw, 5rem) 0 clamp(1.6rem, 5vw, 2.6rem); }
.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--sp-3);
}
h1 {
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 var(--sp-3);
}
.lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--text-soft); max-width: 36em; margin: 0; }

h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 650; letter-spacing: -.01em; margin: var(--sp-5) 0 var(--sp-2); }
h3 { font-size: 1.05rem; font-weight: 650; margin: var(--sp-4) 0 var(--sp-1); }
p, ul { margin: var(--sp-2) 0; }
ul { padding-left: 1.25rem; }
li { margin: var(--sp-1) 0; }

a { color: var(--accent-ink); text-decoration: none; }

/* ---- bento grid + app cards ---- */
.bento {
  list-style: none; padding: 0; margin: var(--sp-3) 0 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  grid-auto-flow: dense;
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 6px);
  overflow: hidden;
}
.card__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--accent), var(--accent-2)); }
.card--featured { grid-column: span 2; }
@media (max-width: 620px) { .card--featured { grid-column: span 1; } }

@media (hover: hover) and (pointer: fine) {
  .card { transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft); }
  .card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--glow); }
}
.card:active { transform: translateY(-1px) scale(.992); }
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.card h2 { margin: 0 0 var(--sp-1); padding-right: 6rem; font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; }
.card .desc { color: var(--text-soft); margin: 0 0 var(--sp-3); font-size: .98rem; flex: 1; }
.card__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: 0; }

/* status chip */
.chip {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--pill); padding: .25rem .6rem;
}
.chip--live { color: var(--text-soft); }
.chip--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---- links + buttons ---- */
.link { font-size: .92rem; font-weight: 600; color: var(--accent-ink); display: inline-flex; align-items: center; gap: .2em; padding: .3rem 0; }
.link::after { content: "→"; opacity: .55; transition: transform var(--dur-micro) var(--ease-soft); }
.link:hover::after { transform: translateX(3px); }
.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.btn {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .85rem; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--pill); padding: .5rem 1rem; cursor: pointer;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: transform var(--dur-micro) var(--ease-soft), filter var(--dur-micro) var(--ease-soft), border-color var(--dur-micro) var(--ease-soft);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--store { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); margin-left: auto; }
.btn--store:hover { transform: translateY(-1px); filter: brightness(1.07); }
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.card__links .btn--store { font-size: .8rem; padding: .42rem .85rem; }

/* ---- document pages: reading sheet ---- */
.sheet {
  background: var(--surface);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 5vw, 2.6rem);
  margin-top: var(--sp-3);
}
.back { margin: var(--sp-4) 0 0; }
.doc-head { border-bottom: 1px solid var(--border); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
.doc-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: var(--sp-2) 0; }
.doc-head .lede { margin-top: var(--sp-2); }
.meta { font-family: var(--mono); font-size: .76rem; color: var(--text-faint); margin: var(--sp-2) 0 0; }
.doc-head .btn--store { margin: var(--sp-3) 0 0; }
.doc p { color: var(--text-soft); }
.doc strong { color: var(--text); font-weight: 650; }
.doc a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: border-color var(--dur-micro) var(--ease-soft); }
.doc a:hover { border-color: var(--accent); }
.doc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.callout {
  background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; font-size: .96rem;
}
.callout p { margin: var(--sp-1) 0; color: var(--text-soft); }

code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); padding: .08rem .35rem; border-radius: 5px; }

/* ---- contact form embed (support pages) ---- */
.form-frame {
  width: 100%; min-height: 720px; margin: var(--sp-3) 0 var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-solid); box-shadow: var(--shadow);
}
.form-note { font-size: .9rem; color: var(--text-faint); }

/* ---- footer ---- */
.site-footer {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; justify-content: space-between;
}
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: var(--sp-4); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  body::before { animation: none; }
  .rise { opacity: 1; }
}

/* ---- reduced transparency: swap glass for solid ---- */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .card, .sheet { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* backdrop-filter unsupported fallback */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar, .card, .sheet { background: var(--surface-solid); }
}

/* ---- print (clean privacy policies) ---- */
@media print {
  .topbar, .theme-toggle, .back, body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet, .card { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  a { color: #000; text-decoration: underline; }
}