/* /builder/tokens.css — Modern minimalist design system for the unified Builder.
   Neutral palette, single burgundy accent, editorial typography.
   Loaded standalone (independent of hub-modern.css so the Builder has its own identity). */

:root{
  /* Neutrals — cool minimalist gray scale (no warm tint) */
  --n0:#ffffff;
  --n50:#fafafa;
  --n100:#f4f4f5;
  --n150:#ececee;
  --n200:#e4e4e7;
  --n300:#d4d4d8;
  --n400:#a1a1aa;
  --n500:#71717a;
  --n600:#52525b;
  --n700:#3f3f46;
  --n800:#27272a;
  --n900:#18181b;

  /* Single accent — burgundy (drawn from the wider hub identity, but muted) */
  --accent:#7a1f2b;
  --accent-hover:#661820;
  --accent-soft:#f4e6e8;
  --accent-tint:rgba(122,31,43,.08);

  /* Semantic surfaces (light mode) */
  --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);

  /* State */
  --focus:0 0 0 3px rgba(122,31,43,.15);
  --shadow-1:0 1px 2px rgba(20,19,16,.04),0 1px 1px rgba(20,19,16,.02);
  --shadow-2:0 4px 12px rgba(20,19,16,.06),0 2px 4px rgba(20,19,16,.04);
  --shadow-3:0 12px 32px rgba(20,19,16,.10),0 4px 12px rgba(20,19,16,.06);

  /* Radii */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:999px;

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

  --t-xs:.72rem;   /* 11.5px */
  --t-sm:.82rem;   /* 13px */
  --t-md:.93rem;   /* 15px */
  --t-lg:1.05rem;  /* 17px */
  --t-xl:1.22rem;  /* 19.5px */
  --t-2xl:1.5rem;
  --t-3xl:1.85rem;

  /* Spacing scale (4px grid) */
  --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;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(0,.6,.2,1);
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:320ms;
}

body.theme-dark,
html[data-theme-early="dark"],
html[data-theme-early="dark"] body{
  /* True inky black background so the reader feels like a proper night mode. Cool neutral (no warm brown tint). */
  --bg:#050505;
  --surface:#141414;
  --surface-2:#1c1c1c;
  --surface-3:#242424;
  --border:#2a2a2a;
  --border-strong:#3a3a3a;
  --ink:#ededed;
  --ink-2:#a1a1aa;
  --ink-3:#71717a;
  --ink-muted:#52525b;
  --accent:#c94a5c;
  --accent-hover:#d75d6f;
  --accent-soft:rgba(201,74,92,.14);
  --accent-tint:rgba(201,74,92,.10);
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 4px 12px rgba(0,0,0,.55);
  --shadow-3:0 12px 32px rgba(0,0,0,.65);
  --focus:0 0 0 3px rgba(201,74,92,.28);
}
/* Anti-FOUC: paint html+body dark IMMEDIATELY when the inline head script
   set data-theme-early="dark", before tokens.css finishes loading or theme.js
   adds body.theme-dark. Prevents a light flash between page navigations. */
html[data-theme-early="dark"]{background:#050505;color-scheme:dark}
html[data-theme-early="dark"] body{background:#050505;color:#f2ede2}
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;text-rendering:optimizeLegibility;height:100%}
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)}

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

/* Utility bits */
.hidden{display:none!important}
.only-mobile{display:none}
@media(max-width:840px){
  .only-mobile{display:initial}
  .no-mobile{display:none!important}
}