/* MORR — Daylight Studio
   tokens.css — §4. Light theme on :root, Night Bloom on [data-theme="night"].
   Order for the whole system: tokens -> base -> layout -> components -> utilities. */

:root {
  /* 4.2 Night Bloom is now the base theme */
  --canvas:#0b0b0c; --band:#131315; --surface:#1c1c1e;
  --line:#2c2c2e;   --line-strong:#3a3a3c;
  --ink:#f5f4f0;      /* 17.88 on canvas */
  --ink-2:#c9c6bf;    /* 11.54 */
  --muted:#b8b4ab;    /* 9.51  */
  --muted-2:#9a968e;  /* 6.68 — lightest allowed text */
  --faint:#6e6a62;    /* never text */
  --accent:#8d86e0; --accent-ink:#a9a4ec;
  --iris:#8d86e0;   --iris-soft:#2a2740;
  --blue-gray:#9ab0da;
  --signal:#0a84ff; --signal-ink:#6cb6ff;
  --clay:#c8764f;   --clay-ink:#e0a27c;
  --success:#4fbf7f; --warning:#e0a050; --error:#ef6f62; --info:#a9a4ec;

  /* 4.4 spacing */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:40px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* radii — one button system: every button is a pill */
  --r-xs:6px; --r-sm:12px; --r-md:20px; --r-lg:28px; --r-pill:999px;

  /* warm-tinted shadows, never pure black */
  --sh-1:0 0 0 1px rgb(255 255 255 / .05);
  --sh-2:0 0 0 1px rgb(255 255 255 / .06), 0 18px 40px -12px rgb(0 0 0 / .7);
  --sh-3:0 0 0 1px rgb(255 255 255 / .07), 0 40px 90px -24px rgb(0 0 0 / .85);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --d-1:120ms; --d-2:220ms; --d-3:480ms; --d-4:900ms; --d-loop:8s;

  /* layout */
  --container:1440px; --container-art:1440px; --measure:640px;
  --gutter:clamp(20px,4vw,40px);
  --section-pad:clamp(56px,6.5vw,104px);

  /* 4.3 type — fluid between 390 and 1440 */
  --f-display:clamp(32px,1.257rem + 3.048vw,64px);
  --f-h1:clamp(30px,1.179rem + 2.857vw,60px);
  --f-h2:clamp(27px,1.13rem + 2.38vw,52px);
  --f-h3:clamp(22px,1.2rem + .95vw,32px);
  --f-h4:clamp(19px,1.08rem + .48vw,24px);
  --f-h5:clamp(18px,1.07rem + 0.19vw,20px);
  --f-h6:clamp(12px,0.71rem + 0.15vw,13px);
  --f-lead:clamp(16px,.95rem + .29vw,19px);
  --f-body:clamp(16px,.98rem + .1vw,17px);
  --f-small:15px; --f-caption:13px; --f-label:14px; --f-button:16px;
  --f-num:clamp(40px,2.04rem + 1.52vw,56px);

  /* grain — one shared texture, art and night only */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-opacity:.24;

  /* App Store is unverified — flip to 1 only when it is genuinely live */
  --app-store-live:0;
}

/* 4.2 Night Bloom */
[data-theme="day"] {
  --canvas:#faf9f6; --band:#f1efea; --surface:#ffffff;
  --line:#d9d6ce;   --line-strong:#b8b4ab;
  --ink:#141414; --ink-2:#4a4741; --muted:#5f5b54; --muted-2:#6e6a62; --faint:#97938a;
  --accent:#5b5fc7; --accent-ink:#4b4fb3; --iris-soft:#d7d3ec;
  --signal-ink:#0066cc; --clay-ink:#9a5233;
  --success:#276b43; --warning:#9a5b12; --error:#b4382a; --info:#4b4fb3;
  --grain-opacity:.18;
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:Karla,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--f-body); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4,h5{margin:0; font-weight:500; text-wrap:balance; color:var(--ink)}
h1{font-size:var(--f-h1); line-height:1.1; letter-spacing:-.012em}
h2{font-size:var(--f-h2); line-height:1.12; letter-spacing:-.01em}
h3{font-size:var(--f-h3); line-height:1.2; letter-spacing:-.005em}
h4{font-size:var(--f-h4); line-height:1.25; letter-spacing:-.01em}
h5{font-size:var(--f-h5); line-height:1.3;  letter-spacing:-.005em; font-weight:600}
p{margin:0; text-wrap:pretty; max-width:68ch}
a{color:var(--accent-ink)}
img,svg{display:block; max-width:100%}


/* focus — never removed without replacement */
:where(a,button,[tabindex],summary,input):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs);
}

/* CONTAINMENT: the embedded app UI brings its own type and layout. Page-level
   element styles must not reach inside it, or headings and paragraphs in the
   product shots get resized and the sidebar collapses. */
.stage .brw, .stage .iph{font-size:14px;line-height:normal;letter-spacing:normal;color:var(--ink)}
.stage .brw :is(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  line-height:inherit;margin:0;text-wrap:wrap}
.stage .iph :is(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  line-height:inherit;margin:0;text-wrap:wrap}
.stage :is(p,li){max-width:none;text-wrap:wrap;margin:0}

/* 10. reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation-play-state:paused!important; transition-duration:.001ms!important;
}