/* Groupsync design tokens: one source of truth for landing, auth and legal pages.
   Accent values come from theme.js (--accent, --accent-2, --accent-soft, --accent-ink)
   so the user's chosen accent flows through every component. The values below
   are the pre-paint defaults and match the coral preset. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root{
  color-scheme: dark;
  /* graphite ground with a faint green cast; flat tonal surfaces, no glass */
  --bg:#101312; --surface-1:#171B1A; --surface-2:#1E2423; --surface-3:#282F2D;
  --line:rgba(236,242,239,.09); --line-strong:rgba(236,242,239,.18);
  --ink:#ECF1EE; --ink-soft:#B1BBB6; --ink-faint:#8A9590;
  --accent:#E8734F; --accent-2:#FFB199; --accent-soft:rgba(232,115,79,.18); --accent-ink:#1C0E08;
  --link:color-mix(in srgb,var(--accent) 55%,white);
  --todo:#8E9894; --doing:#E2B33C; --done:#4FB78A; --danger:#F2777B;
  --danger-soft:rgba(242,119,123,.14);

  --font-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-xs:.75rem; --t-sm:.8125rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-xl:clamp(1.9rem,1.3rem + 2vw,2.75rem);
  --t-2xl:clamp(2.5rem,1.4rem + 3.4vw,3.75rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;

  /* radius rule: controls 10, containers 14, big surfaces 20, pills only for chips */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  --shadow-pop:0 1px 0 rgba(255,255,255,.04) inset,0 22px 48px -12px rgba(0,0,0,.55);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-fast:140ms; --dur:220ms;
}
html[data-theme="light"]{
  color-scheme: light;
  --bg:#F3F5F4; --surface-1:#FFFFFF; --surface-2:#EAEEEC; --surface-3:#DDE3E0;
  --line:rgba(20,30,26,.11); --line-strong:rgba(20,30,26,.22);
  --ink:#151A18; --ink-soft:#4B5651; --ink-faint:#5B6661;
  --link:color-mix(in srgb,var(--accent) 70%,black);
  --todo:#5B6661; --doing:#765600; --done:#136B49; --danger:#B02F35;
  --danger-soft:rgba(176,47,53,.10);
  --shadow-pop:0 22px 44px -14px rgba(20,30,26,.22);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--surface-3) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:650;margin:0;line-height:1.06;letter-spacing:-.028em;text-wrap:balance;font-variation-settings:'opsz' 48}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em}
::selection{background:var(--accent);color:var(--accent-ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px;border:2px solid var(--bg)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.theme-transitioning,.theme-transitioning *{transition:background-color .22s ease,border-color .22s ease,color .18s ease !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}