/* Caliber tokens: the only place on the site where a color is written down (site/tools/check_site.py enforces it).
   Values are the app's, from repo/Design/CaliberColors.swift and CaliberTheme.swift (2026-10-06): dark first, light
   below. Lines marked "posts" come from caliber-social/templates/base.css, for parts the app has no token for.
   A page opts into light/dark with <html data-theme="auto">; without it the page stays dark, like the posts. */

:root{
  color-scheme:dark;
  /* backgrounds */
  --bg:#151516; --surface:#1B1B1D; --elevated:#232326; --input:#1E1E21;
  /* accents */
  --teal:#5B9A8B; --teal-muted:#4A7D71; --teal-text:#5B9A8B;
  --coral:#C47B6B; --coral-muted:#A8685B; --coral-text:#C47B6B;
  /* signals */
  --rising:#6DAF7B; --stable:#8E8E94; --cooling:#BE6A6A; --info:#7B8FA8; --gold:#D1AD6B;
  /* text */
  --text:#EFEBE3; --text-2:#8E8E94; --text-3:#8A8A90; --text-inverse:#151516;
  --text-card:#D9D5CD;                                   /* posts: body copy inside cards */
  /* borders and tints */
  --border-subtle:rgba(255,255,255,0.05); --border-medium:rgba(255,255,255,0.08);
  --border-teal:rgba(91,154,139,0.20); --border-coral:rgba(196,123,107,0.20);
  --border-dashed:#3A3A3E;                               /* posts: the dashed rule under a document */
  --teal-subtle:rgba(91,154,139,0.09); --coral-subtle:rgba(196,123,107,0.09);
  --rising-subtle:rgba(109,175,123,0.10); --cooling-subtle:rgba(190,106,106,0.10);
  /* glows, posts: teal top right, coral bottom left */
  --glow-teal:rgba(91,154,139,0.14); --glow-coral:rgba(196,123,107,0.07);
  /* chrome */
  --nav-bg:rgba(21,21,22,0.86);
  --bezel:#0F0F10; --island:#000000;                     /* posts: the phone */
  --bubble-them:#2A2A2E; --bubble-me:#3B6E63; --bubble-me-text:#F4F1EA;   /* posts: chat bubbles */
  --home-indicator:rgba(255,255,255,0.15);
  /* shadows: the app's two tiers, plus the phone's lift */
  --shadow-card:0 4px 16px rgba(0,0,0,0.10);
  --shadow-float:0 4px 24px rgba(0,0,0,0.25);
  --shadow-phone:0 30px 80px rgba(0,0,0,0.45);
  --teal-glow-cta:0 4px 20px rgba(91,154,139,0.25);
  /* grain, the app's GrainOverlay */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");

  /* type: New York in the app, Newsreader on the web and in the posts; SF on Apple devices, Inter elsewhere */
  --font-display:'Newsreader','New York',ui-serif,Georgia,serif;
  --font-body:-apple-system,'SF Pro Text',Inter,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace;

  /* CaliberTheme.swift */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:9999px;
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-base:16px; --space-lg:20px;
  --space-xl:24px; --space-2xl:32px; --space-3xl:44px; --space-4xl:60px;
}

@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    color-scheme:light;
    --bg:#FAFAF8; --surface:#FFFFFF; --elevated:#F5F4F1; --input:#F0EFEC;
    --teal:#4A8577; --teal-muted:#3D7066; --teal-text:#3D7066;
    --coral:#B56B5B; --coral-muted:#9C5D50; --coral-text:#9C5D50;
    --rising:#357D44; --stable:#7A7A80; --cooling:#B84848; --info:#5A7A99; --gold:#A8874B;
    --text:#1C1C1E; --text-2:#6B6B70; --text-3:#6E6E72; --text-inverse:#FAFAF8;
    --text-card:#2C2C2E;
    --border-subtle:rgba(0,0,0,0.06); --border-medium:rgba(0,0,0,0.10);
    --border-teal:rgba(74,133,119,0.18); --border-coral:rgba(181,107,91,0.18);
    --border-dashed:#D4D2CC;
    --teal-subtle:rgba(74,133,119,0.08); --coral-subtle:rgba(181,107,91,0.08);
    --rising-subtle:rgba(53,125,68,0.08); --cooling-subtle:rgba(184,72,72,0.08);
    --glow-teal:rgba(74,133,119,0.08); --glow-coral:rgba(181,107,91,0.05);
    --nav-bg:rgba(250,250,248,0.86);
    --teal-glow-cta:0 4px 20px rgba(74,133,119,0.20);
  }
}