/* /shared/tokens.css — Design-system foundation for Bible Parlor.
   Neutral palette, single burgundy accent, editorial typography.
   Wave 4: tightened type scale, refined motion, container-query ready. */

:root{
  /* Neutrals — cool minimalist gray scale */
  --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 */
  --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,.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);

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

  /* Type scale — slightly tighter for density at small sizes */
  --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;    /* 11.5px */
  --t-sm:.8125rem;  /* 13px */
  --t-md:.9375rem;  /* 15px */
  --t-lg:1.0625rem; /* 17px */
  --t-xl:1.25rem;   /* 20px */
  --t-2xl:1.5rem;
  --t-3xl:1.875rem;
  --t-4xl:2.25rem;

  /* 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;--s-20:80px;

  /* Motion — tighter, physically correct */
  --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 */
  --topbar-blur:blur(14px) saturate(1.6);
  --topbar-bg-opaque:var(--surface);
}

/* ── Dark mode ─────────────────────────────────────────────────── */
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}

/* ── Accent presets ─────────────────────────────────────────────── */
/* Sapphire */
html[data-accent="sapphire"]{--accent:#1a4fa3;--accent-hover:#153e82;--accent-tint:rgba(26,79,163,.08);--accent-soft:#e3eaf8;--focus:0 0 0 3px rgba(26,79,163,.18)}
html[data-accent="sapphire"][data-theme-early="dark"]{--accent:#4a82d4;--accent-hover:#6398e0;--accent-tint:rgba(74,130,212,.12);--accent-soft:rgba(74,130,212,.15);--focus:0 0 0 3px rgba(74,130,212,.32)}
/* Forest */
html[data-accent="forest"]{--accent:#1e6b3a;--accent-hover:#18572f;--accent-tint:rgba(30,107,58,.08);--accent-soft:#e2f0e7;--focus:0 0 0 3px rgba(30,107,58,.18)}
html[data-accent="forest"][data-theme-early="dark"]{--accent:#3fa862;--accent-hover:#55bf78;--accent-tint:rgba(63,168,98,.12);--accent-soft:rgba(63,168,98,.15);--focus:0 0 0 3px rgba(63,168,98,.32)}
/* Amber */
html[data-accent="amber"]{--accent:#96620a;--accent-hover:#7c5008;--accent-tint:rgba(150,98,10,.08);--accent-soft:#fdf0dc;--focus:0 0 0 3px rgba(150,98,10,.18)}
html[data-accent="amber"][data-theme-early="dark"]{--accent:#d4922a;--accent-hover:#e0a844;--accent-tint:rgba(212,146,42,.12);--accent-soft:rgba(212,146,42,.15);--focus:0 0 0 3px rgba(212,146,42,.32)}
/* Slate */
html[data-accent="slate"]{--accent:#3b5268;--accent-hover:#2f4254;--accent-tint:rgba(59,82,104,.08);--accent-soft:#e4eaef;--focus:0 0 0 3px rgba(59,82,104,.18)}
html[data-accent="slate"][data-theme-early="dark"]{--accent:#7aa0c0;--accent-hover:#90b4d0;--accent-tint:rgba(122,160,192,.12);--accent-soft:rgba(122,160,192,.15);--focus:0 0 0 3px rgba(122,160,192,.32)}
/* Rose */
html[data-accent="rose"]{--accent:#9b2157;--accent-hover:#7e1a46;--accent-tint:rgba(155,33,87,.08);--accent-soft:#fce8f1;--focus:0 0 0 3px rgba(155,33,87,.18)}
html[data-accent="rose"][data-theme-early="dark"]{--accent:#d45e95;--accent-hover:#e07aac;--accent-tint:rgba(212,94,149,.12);--accent-soft:rgba(212,94,149,.15);--focus:0 0 0 3px rgba(212,94,149,.32)}

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

/* ── Mobile safe-area padding helpers ────────────────────────── */
/* Applied to any element that must not be obscured by the home indicator on iOS */
.safe-bottom{padding-bottom:env(safe-area-inset-bottom,0)}
.safe-top{padding-top:env(safe-area-inset-top,0)}

/* ── Overflow-x guard ────────────────────────────────────────── */
/* Prevent any descendant from blowing out the viewport width */
@media(max-width:840px){
  /* Ensure tables scroll horizontally rather than causing overflow */
  .table-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* Allow horizontal chip/tab rows to scroll without wrapping */
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}
  .scroll-x::-webkit-scrollbar{height:2px}
}

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