/* FocusHour's one token sheet: Precision (owner, 20 Oct 2026; docs/research/design-directions-2026-10-20/DIRECTIONS.md
   §4). Geist alone, white surfaces, near-black primary buttons, emerald only for selection, progress and focus, 4-8 px
   corners (12 for sheets), 1 px lines and no shadows. Linked first by every page on both sites (focushour.app and
   getfocushour.com), then css/site.css on the website or app/app.css in the web app. The rules for using them:
   apps/web/README.md, "Design system". Change a value here, never a copy of it in a page's stylesheet. */

/* Geist (Vercel, SIL OFL 1.1; the `geist` npm package 1.7.2, Geist-Variable.ttf), variable 100-900, subset to Latin,
   Latin Extended-A, punctuation, currency, arrows and maths operators: fonts/Geist.woff2, 34 KB, its licence in
   fonts/Geist-LICENSE.txt. Preload it on every page. The fallback is a local sans sized to Geist's metrics, so a slow
   phone's swap barely moves the text. */
@font-face{font-family:"Geist";src:url(/fonts/Geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Roboto"),local("Helvetica");size-adjust:100%;ascent-override:100.5%;descent-override:29.5%;line-gap-override:0%}

:root{
  color-scheme:light;
  /* surfaces and ink */
  --page:#FFFFFF; --paper:var(--page); --surface:#FFFFFF; --sunk:#F5F6F5;
  --line:#E4E7E5;        /* hairlines: cards, dividers, the header's edge (decoration, not a control) */
  --line-strong:#CDD2CF; /* a quieter rule where a hairline needs more weight (tables, the device frame) */
  --edge:#858E8A;        /* every control's edge: fields, choices, secondary buttons, checks (3:1 on white and sunk) */
  --ink:#0E1311; --ink-soft:#59615D;
  /* the primary action is ink; the one accent is emerald, for selection, progress, focus and the mark's wedge */
  --btn:#0E1311; --btn-hover:#2B312E; --on-btn:#FFFFFF;
  --accent:#0A7A55; --accent-hover:#08684A; --on-accent:#FFFFFF; --accent-tint:#EEF6F2;
  /* meanings, as text and thin marks only: correct is the accent, wrong coral, Key idea indigo, a flag amber */
  --coral:#B4402B; --coral-tint:#FBEFEC; --indigo:#3D4DB7; --amber:#9A5B00; --sky:#2F6FB0;
  /* older names the stylesheets still read, kept to the new palette */
  --emerald:var(--accent); --emerald-hover:var(--accent-hover); --on-emerald:var(--on-accent); --saffron:var(--amber);
  /* type */
  --sans:"Geist","Geist Fallback",system-ui,"Segoe UI",sans-serif;
  --serif:var(--sans);   /* Precision has one face; passages are Geist too */
  /* space, radius (controls 6, small marks 4, cards 8, sheets 12), no shadows */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-pill:999px;
  --shadow:none;
  --shadow-device:0 1px 0 rgba(0,0,0,.02),0 30px 60px -40px rgba(14,19,17,.35);   /* only under the website's product frame */
  --scrim:rgba(14,19,17,.36);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --page:#0B0D0C; --surface:#121514; --sunk:#171B19; --line:#252A28; --line-strong:#363C39; --edge:#68716C;
  --ink:#EDEFEE; --ink-soft:#9BA39F;
  --btn:#EDEFEE; --btn-hover:#D3D7D5; --on-btn:#0B0D0C;
  --accent:#4CC79A; --accent-hover:#6BD4AC; --on-accent:#06231A; --accent-tint:#132620;
  --coral:#F07A62; --coral-tint:#2A1713; --indigo:#8D98F0; --amber:#E8A23A; --sky:#6DB3E8;
  --shadow-device:0 30px 60px -40px rgba(0,0,0,.7); --scrim:rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0B0D0C; --surface:#121514; --sunk:#171B19; --line:#252A28; --line-strong:#363C39; --edge:#68716C;
  --ink:#EDEFEE; --ink-soft:#9BA39F;
  --btn:#EDEFEE; --btn-hover:#D3D7D5; --on-btn:#0B0D0C;
  --accent:#4CC79A; --accent-hover:#6BD4AC; --on-accent:#06231A; --accent-tint:#132620;
  --coral:#F07A62; --coral-tint:#2A1713; --indigo:#8D98F0; --amber:#E8A23A; --sky:#6DB3E8;
  --shadow-device:0 30px 60px -40px rgba(0,0,0,.7); --scrim:rgba(0,0,0,.6);
}