/* ================================================================
   Oddly True — DESIGN TOKENS (single source of truth)
   Every colour, size, space, radius, shadow and motion value used
   in app.css / splash.css comes from here.
   ================================================================ */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap; src:url('/fonts/fraunces-latin-wght-italic.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); }
@property --pct { syntax:'<number>'; inherits:true; initial-value:0; }

:root {
  /* ---- colour: palette derived from the app icon (monocle owl: black/white neutrals on navy-indigo -> teal glow -> coral) ---- */
  --bg:#0c0b29; --bg-2:#131238; --surface:#161540; --surface-2:#1f1e4f; --surface-3:#2b2a62;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --bar:rgba(12,11,41,.86);                                  /* translucent top/tab bars (blurred) */
  /* ---- colour: text (all >= 4.5:1 on --bg and --surface) ---- */
  --text:#f6f6fc; --text-2:#c0c0e0; --text-3:#9696c4;
  /* ---- colour: brand + semantic ---- */
  --accent:#2dd4bf; --accent-hi:#7df0de; --accent-lo:#0e9f8e; --accent-ink:#04211e;
  --accent-soft:rgba(45,212,191,.14); --accent-glow:rgba(45,212,191,.38);
  --good:#34d399;  --good-soft:rgba(52,211,153,.14);   /* true claim / correct */
  --fake:#ff6b5e;  --fake-hi:#ffa393; --fake-soft:rgba(255,107,94,.14); --fake-glow:rgba(255,107,94,.4); /* the invented claim / wrong / underline */
  --gold:#f2bd6b; --gold-soft:rgba(242,189,107,.16); --gold-line:rgba(242,189,107,.5); /* warm accent, sparing: streak flame, perfect sets, one hairline */
  --grad-hero:linear-gradient(160deg,#23236a 0%,#191951 55%,#131240 100%);
  /* ---- type: families ---- */
  --font-display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  /* ---- type: scale (1.2–1.25 ratio, rem) ---- */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem;
  --fs-lg:1.5rem; --fs-xl:2.125rem; --fs-2xl:4.5rem;   /* 12 / 14 / 16 / 24 / 34 / 72 */
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.5;
  --tr-label:.14em; --tr-display:-.025em; --tr-ui:-.005em;

  /* ---- space: 4-pt scale ---- */
  --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:56px;
  --gutter:20px; --top-h:60px; --tab-h:52px;
  /* ---- radii ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-w:20px; --r-pill:999px;
  /* ---- elevation (flat; one soft shadow for floating bars) ---- */
  --e-1:0 1px 0 rgba(255,255,255,.04) inset;
  --e-2:0 16px 40px rgba(0,0,0,.45);
  /* ---- touch targets ---- */
  --tap:44px; --btn-h:56px; --btn-h-sm:48px;
  /* ---- motion ---- */
  --dur-1:120ms; --dur-2:220ms; --dur-3:380ms; --dur-4:700ms; --dur-cine:1400ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.2,0,0,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-in:cubic-bezier(.4,0,1,1);
  /* ---- safe areas ---- */
  --sat:env(safe-area-inset-top,0px); --sab-env:env(safe-area-inset-bottom,0px); --sab:var(--sab-env);
  /* full-screen fit (head script keeps --app-h / --dead-b current; see index.template.html) */
  --app-h:100dvh; --dead-b:0px; --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}

/* Hide scrollbar chrome across app pages/owned frames; scrolling and sizing stay unchanged. */
html,body,* { scrollbar-width:none !important; }
*::-webkit-scrollbar { display:none !important; }