/* ==========================================================================
   Citadel Fitness: brand tokens
   The single source for colour, type and motion across every page on the
   site. Marketing pages and document pages differ in how much they use of
   this, never in what the values are.

   Loaded before every other stylesheet. Nothing here is page-specific: a
   value that only one page needs belongs in that page's own styles.
   ========================================================================== */

/* ---- Sora, self-hosted ---------------------------------------------------
   Served from this origin rather than fonts.gstatic.com. That removes the
   only third-party request the public pages make, which settles a privacy
   question rather than asking a visitor to consent to it: a Google-hosted
   font sends the reader's IP address to Google on every page view, and a
   German court has treated that alone as requiring consent.

   It is also simply faster. No second DNS lookup, no second TLS handshake,
   and no render-blocking stylesheet on an origin we do not control.

   One variable file per subset covers 600-800, so the three weights the site
   uses cost one download rather than three. Sora is licensed under the SIL
   Open Font License; OFL.txt sits beside the files, which is what the
   licence requires when redistributing.

   font-display: swap so text paints in the fallback immediately rather than
   waiting on the font. The fallback stack is a real one for the same reason. */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Ink scale -------------------------------------------------------
     Mirrored from the app's own theme (src/theme/tokens.ts) so the site and
     the app are the same colours rather than similar ones. */
  --ink900: #0B0E14;
  --ink800: #10141d;
  --ink700: #1C2230;
  --ink500: #4A5468;
  --ink300: #8A93A6;
  --ink100: #D8DCE4;
  --white:  #FFFFFF;
  --border: #2A3140;

  /* ---- Accent ----------------------------------------------------------
     One ember, spent deliberately. The three gradient partners are for
     feature artwork only and never for text or interactive states. */
  --primary:    #FF5A36;
  --primary-2:  #FF3D81;
  --calendar-2: #8B5CF6;
  --pulse-2:    #22D3EE;

  /* ---- Type ------------------------------------------------------------
     Sora carries the marketing voice. Georgia carries the document voice:
     legal and support pages are read sentence by sentence, sometimes under
     stress, and a serif holds long instructional text better than a second
     grotesque would. */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-doc:     Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  /* ---- Motion ----------------------------------------------------------
     Durations are the app's, from src/theme/motion.ts, not invented for the
     web: a button on this site should feel like a button in the app.

     The two curves were already here. --ease decelerates into rest and suits
     anything arriving; --fly-ease overshoots slightly and suits anything
     that should feel thrown rather than placed.

     Marketing and document pages share all of this. What differs is how
     much motion each one spends, not how that motion behaves. Set pieces
     get --dur-scene, kept well clear of the interaction scale so a hero
     sequence is never mistaken for a hover response. */
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  320ms;
  --dur-scene: 850ms;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --fly-ease: cubic-bezier(0.16, 1.36, 0.34, 1);

  /* The app presses its buttons to 0.96. So does the site. */
  --press: 0.96;
}