/* /builder/tokens.css — Design system for the Builder. Wave 4.
   Synced with /shared/tokens.css — same primitives so the Builder
   chrome (from hub-chrome.css) and the Builder editor look identical. */

:root{
  --n0:#ffffff;
  --n50:#fafafa;
  --n100:#f4f4f5;
  --n150:#ececee;
  --n200:#e4e4e7;
  --n300:#d4d4d8;
  --n400:#a1a1aa;
  --n500:#71717a;
  --n600:#52525b;
  --n700:#3f3f46;
  --n800:#27272a;
  --n900:#18181b;

  --accent:#7a1f2b;
  --accent-hover:#661820;
  --accent-soft:#f4e6e8;
  --accent-tint:rgba(122,31,43,.08);

  --bg:var(--n50);
  --surface:var(--n0);
  --surface-2:var(--n100);
  --surface-3:var(--n150);
  --border:var(--n200);
  --border-strong:var(--n300);
  --ink:var(--n800);
  --ink-2:var(--n600);
  --ink-3:var(--n500);
  --ink-muted:var(--n400);

  --focus:0 0 0 3px rgba(122,31,43,.18);
  --shadow-1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-2:0 4px 14px rgba(0,0,0,.08),0 2px 5px rgba(0,0,0,.05);
  --shadow-3:0 14px 36px rgba(0,0,0,.12),0 5px 14px rgba(0,0,0,.07);

  --r-xs:4px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;
  --r-pill:999px;

  --font-sans:'Inter','Helvetica Neue',system-ui,-apple-system,sans-serif;
  --font-serif:'Iowan Old Style','Palatino','Georgia',serif;
  --font-scripture:'EB Garamond','Iowan Old Style','Georgia',serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;

  --t-xs:.72rem;
  --t-sm:.8125rem;
  --t-md:.9375rem;
  --t-lg:1.0625rem;
  --t-xl:1.25rem;
  --t-2xl:1.5rem;
  --t-3xl:1.875rem;
  --t-4xl:2.25rem;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;
  --s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;

  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(0,.6,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:100ms;
  --dur-2:180ms;
  --dur-3:280ms;
  --dur-4:400ms;

  --topbar-blur:blur(14px) saturate(1.6);
}

body.theme-dark,
html[data-theme-early="dark"],
html[data-theme-early="dark"] body{
  --bg:#050505;
  --surface:#111111;
  --surface-2:#1a1a1a;
  --surface-3:#222222;
  --border:#2c2c2c;
  --border-strong:#3c3c3c;
  --ink:#ededef;
  --ink-2:#a1a1aa;
  --ink-3:#71717a;
  --ink-muted:#52525b;
  --accent:#a83243;
  --accent-hover:#c04355;
  --accent-soft:rgba(168,50,67,.15);
  --accent-tint:rgba(168,50,67,.12);
  --shadow-1:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 4px 14px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.4);
  --shadow-3:0 14px 36px rgba(0,0,0,.7),0 5px 14px rgba(0,0,0,.5);
  --focus:0 0 0 3px rgba(168,50,67,.32);
}
html[data-theme-early="dark"]{background:#050505;color-scheme:dark}
html[data-theme-early="dark"] body{background:#050505;color:#ededef}
html[data-theme-early="light"]{background:#fafafa;color-scheme:light}

/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;height:100%}
html{overflow-x:hidden}
body{overflow-x:hidden}
body.builder-body{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-tint);color:var(--ink)}
img,video{max-width:100%;height:auto}

/* Focus rings */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}

/* Utilities */
.hidden{display:none!important}
.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}
.only-mobile{display:none}
@media(max-width:840px){
  .only-mobile{display:initial}
  .no-mobile{display:none!important}
}

/* 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}
}