/* flocks prototype — design tokens. Neutral light/dark base, brand colours as flares only. */
:root{
  /* accent is monochrome (ink/white per theme); colour comes from the gradients */
  --ink:#101D1C; --sage:#C2CFC6; --slate:#2E4540;
  --success:#2E7D4F; --warn:#C0892B; --danger:#C24A3F;

  /* type */
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  --font-flair:"Fraunces",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* radii */
  --r-control:12px; --r-card:18px; --r-panel:26px; --r-pill:999px;
}

html[data-theme="light"]{
  --bg-base:#f3f4f7;
  --bg-grad:linear-gradient(180deg,#f6f7f9 0%,#eef0f4 100%);
  --panel:rgba(255,255,255,.5); --panel-bd:rgba(255,255,255,.72);
  --raise:#fcfdfe; --raise-bd:rgba(255,255,255,.9); --surface-2:#f3f4f7;
  --glass-card:rgba(255,255,255,.56); --glass-card-bd:rgba(255,255,255,.72); --glass-card-spec:rgba(255,255,255,.85);
  --text:#1d2530; --text-2:#6a7380; --muted:#a4acb8;
  --chip:#eceef2; --line:rgba(120,132,148,.20); --line-soft:rgba(120,132,148,.10);
  --hover:rgba(255,255,255,.62);
  --rail-active:#101D1C; --rail-active-tx:#ffffff;
  --accent:#101D1C; --accent-tx:#F5F4EF;
  --sh-raise:0 10px 30px rgba(40,52,72,.10), 0 2px 6px rgba(40,52,72,.06);
  --sh-soft:0 8px 24px rgba(40,52,72,.07);
  --blur:blur(22px) saturate(150%);
  --glass-win:rgba(255,255,255,.55); --glass-win-bd:rgba(255,255,255,.72); --glass-win-spec:rgba(255,255,255,.9);
  --chart-line:#2E4540; --chart-ghost:#C2CFC6; --chart-fill:rgba(46,69,64,.16);
  /* soft mesh gradient washed subtly behind card content */
  --card-aurora:
    radial-gradient(130% 95% at 100% 108%, rgba(140,199,190,.34) 0%, rgba(140,199,190,0) 55%),
    radial-gradient(120% 90% at -6% -12%, rgba(154,164,140,.18) 0%, transparent 50%);
}

html[data-theme="dark"]{
  --bg-base:#000000;
  --bg-grad:radial-gradient(1100px 680px at 50% -8%, #161618 0%, rgba(0,0,0,0) 62%), #000000;
  --panel:rgba(255,255,255,.04); --panel-bd:rgba(255,255,255,.085);
  --raise:#0c0c0d; --raise-bd:rgba(255,255,255,.06); --surface-2:#070707;
  --glass-card:rgba(22,24,30,.46); --glass-card-bd:rgba(255,255,255,.10); --glass-card-spec:rgba(255,255,255,.10);
  --text:#f2f3f4; --text-2:#9a9a9f; --muted:#62626a;
  --chip:rgba(255,255,255,.07); --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.045);
  --hover:rgba(255,255,255,.05);
  --rail-active:rgba(255,255,255,.10); --rail-active-tx:#f2f3f4;
  --accent:#F2F3F4; --accent-tx:#0C0C0D;
  --sh-raise:0 12px 34px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5);
  --sh-soft:0 8px 24px rgba(0,0,0,.5);
  --blur:blur(22px) saturate(140%);
  --glass-win:rgba(26,29,35,.5); --glass-win-bd:rgba(255,255,255,.13); --glass-win-spec:rgba(255,255,255,.12);
  --chart-line:#C2CFC6; --chart-ghost:#33403b; --chart-fill:rgba(194,207,198,.12);
  --card-aurora:
    radial-gradient(130% 95% at 100% 108%, rgba(9,96,109,.42) 0%, rgba(9,96,109,0) 55%),
    radial-gradient(120% 90% at -6% -12%, rgba(140,199,190,.14) 0%, transparent 50%);
}

/* optional: whole-page soft gradient background (toggle via [data-bg="aurora"]) */
html[data-theme="light"][data-bg="aurora"]{
  --bg-grad:
    radial-gradient(70% 60% at 76% 14%, #cfdacb 0%, transparent 60%),
    radial-gradient(82% 72% at 18% 92%, #bcd0c6 0%, transparent 65%),
    radial-gradient(58% 58% at 98% 102%, #cfe7e2 0%, transparent 60%),
    linear-gradient(160deg, #e8ece6 0%, #dce3dc 100%);
}
html[data-theme="dark"][data-bg="aurora"]{
  --bg-grad:
    radial-gradient(72% 60% at 80% 10%, #0c3a40 0%, transparent 58%),
    radial-gradient(82% 70% at 16% 94%, #10231f 0%, transparent 64%),
    radial-gradient(55% 55% at 102% 104%, #0a4a52 0%, transparent 60%),
    #000000;
}