/* EnjoyCrochet · design tokens, themes, base and energy zones (Pop Toy 3D) */
:root{
  --cream:#FFF7E8; --white:#FFFFFF; --navy:#1F2A44; --navy-lip:#0E1528;
  --cherry:#FF5A5F; --cherry-lip:#D9434A; --cherry-ink:#C8323A;
  --sun:#FFC83D; --sun-lip:#E0A716;
  --sky:#3DB2FF; --sky-lip:#1E8FE0; --sky-ink:#0F6FB8;
  --mint:#2BD9A0; --mint-lip:#14B583; --mint-ink:#0B7A57;
  --grape:#8C6CFF; --grape-lip:#6B4FDB;

  --bg:#FFF7E8; --bg-2:#FFEFD3; --surface:#FFFFFF; --surface-2:#FFFCF6; --text:#1F2A44; --muted:#56607A; --faint:#8A93A8;
  --line:#F0E3C9; --line-2:#E8D8B8; --lip:#E8D8B8; --hud:rgba(255,247,232,.88);
  --t-cherry:#FFE5E3; --t-sun:#FFF0C7; --t-sky:#DDF1FF; --t-mint:#D6F8EC; --t-grape:#ECE6FF;
  --trail:#F2E3C3; --trail-done:#B8F0DB; --board:#FFFCF5;
  --shadow:0 18px 40px -18px rgba(31,42,68,.28);
  --shadow-lg:0 30px 60px -20px rgba(31,42,68,.38);
  --hero-veil:linear-gradient(90deg,rgba(255,247,232,.55) 0%,rgba(255,247,232,.18) 34%,rgba(255,247,232,0) 55%);
  --hero-filter:none;
  --overlay:rgba(20,27,46,.42);
  --eyebrow:#C8323A;
  --ok:#14B583; --warn:#E0A716; --err:#D9434A;

  --page-bg:var(--bg);

  --f-display:'Fredoka',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --f-body:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.22,1,.36,1);
  --r-card:28px; --r-btn:18px; --r-sm:14px;
  --wheel:440px;
  --hud-h:74px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141B2E; --bg-2:#18203A; --surface:#1E2740; --surface-2:#1A2238; --text:#F4F1EA; --muted:#AEB6CB; --faint:#7F89A3;
    --line:#2B3657; --line-2:#34406A; --lip:#0D1323; --hud:rgba(20,27,46,.86);
    --t-cherry:rgba(255,90,95,.16); --t-sun:rgba(255,200,61,.15); --t-sky:rgba(61,178,255,.16); --t-mint:rgba(43,217,160,.15); --t-grape:rgba(140,108,255,.18);
    --trail:#2A3555; --trail-done:#1F6E58; --board:#1A2238;
    --shadow:0 18px 40px -18px rgba(0,0,0,.6);
    --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
    --hero-veil:linear-gradient(180deg,rgba(20,27,46,.78) 0%,rgba(20,27,46,.45) 55%,rgba(20,27,46,.25) 100%);
    --hero-filter:saturate(1.05) brightness(.72);
    --overlay:rgba(5,8,18,.6);
    --eyebrow:#FF8A8D; --cherry-ink:#FF8A8D; --sky-ink:#7CCBFF; --mint-ink:#5BE8B8;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141B2E; --bg-2:#18203A; --surface:#1E2740; --surface-2:#1A2238; --text:#F4F1EA; --muted:#AEB6CB; --faint:#7F89A3;
  --line:#2B3657; --line-2:#34406A; --lip:#0D1323; --hud:rgba(20,27,46,.86);
  --t-cherry:rgba(255,90,95,.16); --t-sun:rgba(255,200,61,.15); --t-sky:rgba(61,178,255,.16); --t-mint:rgba(43,217,160,.15); --t-grape:rgba(140,108,255,.18);
  --trail:#2A3555; --trail-done:#1F6E58; --board:#1A2238;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6);
  --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
  --hero-veil:linear-gradient(180deg,rgba(20,27,46,.78) 0%,rgba(20,27,46,.45) 55%,rgba(20,27,46,.25) 100%);
  --hero-filter:saturate(1.05) brightness(.72);
  --overlay:rgba(5,8,18,.6);
  --eyebrow:#FF8A8D; --cherry-ink:#FF8A8D; --sky-ink:#7CCBFF; --mint-ink:#5BE8B8;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hud-h) + 14px);background:var(--page-bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--page-bg);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
html.has-modal,html.has-drawer{overflow:hidden}
img,video,canvas{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0}
.container{width:min(1260px,100% - 48px);margin-inline:auto}
.container--narrow{width:min(960px,100% - 48px);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:12px}
[tabindex="-1"]:focus{outline:none}
svg{fill:currentColor}
svg.i{width:1.15em;height:1.15em;flex:none}
::selection{background:var(--sun);color:#1F2A44}
.view{flex:1 0 auto;display:block;outline:none}
.noscript{padding:96px 0;text-align:center}
.noscript h1{font-size:2.6rem;margin-bottom:14px}

.eyebrow{font-family:var(--f-body);font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow)}
.muted{color:var(--muted)}
.lead{font-size:1.12rem;font-weight:600}
.num-tab{font-variant-numeric:tabular-nums}

@media (max-width:720px){
  :root{--hud-h:64px}
  body{font-size:16px}
  .container,.container--narrow{width:calc(100% - 32px)}
}

/* ---------- energy zones ---------- */
/* FULL: home hero, library, challenge, wheel. Saturated Pop Toy as built. */
.zone-full{--page-bg:var(--bg)}
/* CALM: shop, PDP, cart, checkout. Cream/white, more air, single-colour plates, stickers off. */
.zone-calm{--page-bg:#FFFBF4;--r-card:24px}
:root[data-theme="dark"] .zone-calm{--page-bg:#151C30}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .zone-calm{--page-bg:#151C30}}
.zone-calm .sticker,.zone-calm .zone-full-only{display:none!important}
/* UTILITY: admin. Neutral white/navy surfaces, colour only for status. */
.zone-admin{
  --page-bg:#F4F5F8; --surface:#FFFFFF; --line:#E3E6EE; --line-2:#D5DAE5; --lip:#D5DAE5; --muted:#5A6378; --r-card:16px; --r-btn:12px;
  --shadow:0 1px 2px rgba(31,42,68,.06),0 8px 24px -12px rgba(31,42,68,.18);
}
:root[data-theme="dark"] .zone-admin{--page-bg:#10162A;--surface:#182038;--line:#28324F;--line-2:#323D5E;--lip:#0C1122;--muted:#A8B0C5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .zone-admin{--page-bg:#10162A;--surface:#182038;--line:#28324F;--line-2:#323D5E;--lip:#0C1122;--muted:#A8B0C5}}
.zone-admin .hud,.zone-admin .site-foot,.zone-admin .loopy-stage{display:none!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}