/* ==========================================================================
   PAYR — design tokens
   --------------------------------------------------------------------------
   Every colour below was sampled out of assets/payr.png (the mark) and
   assets/payr-banner.png (the temple), not invented. The mark is a single
   vertical sweep — deep blue at the crown, aqua at the waist, gold at the
   foot — so the palette is that sweep, and the grounds are its top end taken
   down to near-black. Nothing here is a stock Tailwind slate.
   ========================================================================== */

:root {
  /* ---- the sweep, straight off the mark (top → bottom) ---- */
  --sweep-1: #063888;   /* crown, deepest blue        y0  */
  --sweep-2: #0e5dbd;   /* royal                      y4  */
  --sweep-3: #1b8aed;   /* sky                        y6  */
  --sweep-4: #2ec8ec;   /* cyan                       y8  */
  --sweep-5: #3ceee8;   /* aqua, the brightest point  y10 */
  --sweep-6: #2ccbbe;   /* teal                       y12 */
  --sweep-7: #d28c3f;   /* amber, the turn            y20 */
  --sweep-8: #f07b24;   /* orange                     y24 */
  --sweep-9: #f4af31;   /* gold                       y28 */
  --sweep-10:#f7ec42;   /* yellow, the foot           y30 */

  /* ---- the same sweep, walked down to a readable ground ----
     Each stop is its sweep colour at 26% over #030a14, and app.css sizes the
     gradient to the whole document — so scrolling the site walks the mark from
     its crown to its foot: deep blue, aqua at the waist, gold underneath. The
     mix is what keeps body text at contrast while the hue stays exactly true. */
  --ground-1:  #041632;   /* crown   */
  --ground-2:  #062040;
  --ground-3:  #092b4c;
  --ground-4:  #0e3b4c;
  --ground-5:  #12454b;   /* waist   */
  --ground-6:  #0e3c40;
  --ground-7:  #392c1f;
  --ground-8:  #412718;
  --ground-9:  #42351c;
  --ground-10: #424520;   /* foot    */

  /* The mark's sweep, at full strength. Used where it should sing: the hero,
     the spectrum rule, the wordmark. */
  --sweep-line: linear-gradient(90deg, var(--sweep-1) 0%, var(--sweep-2) 11%,
                var(--sweep-3) 22%, var(--sweep-4) 33%, var(--sweep-5) 43%,
                var(--sweep-6) 52%, var(--sweep-7) 70%, var(--sweep-8) 81%,
                var(--sweep-9) 91%, var(--sweep-10) 100%);

  /* The page ground, in the mark's own order, top to bottom. */
  --sweep-ground: linear-gradient(180deg, var(--ground-1) 0%, var(--ground-2) 11%,
                  var(--ground-3) 22%, var(--ground-4) 33%, var(--ground-5) 42%,
                  var(--ground-6) 52%, var(--ground-7) 70%, var(--ground-8) 81%,
                  var(--ground-9) 91%, var(--ground-10) 100%);

  /* ---- grounds: --sweep-1 walked down to black, hue held ---- */
  --bg:        #04101d;
  --bg-soft:   #071829;
  --surface:   #0a1f33;
  --surface-2: #0e2942;
  --surface-3: #133351;
  --chrome:    #05131f;   /* header / footer, sits under a blur */

  /* ---- lines ---- */
  --line:        #17364f;
  --line-soft:   #102a40;
  --line-strong: #235a7d;

  /* ---- ink ---- */
  --ink:       #eef6fb;
  --ink-2:     #a9c6da;
  --ink-3:     #7f9db2;
  --ink-4:     #5f7d93;
  --on-accent: #04101d;

  /* ---- roles ---- */
  --accent:      var(--sweep-4);   /* cyan: links, focus, selection    */
  --accent-soft: #123a4e;
  --accent-dim:  #8fd8ea;
  --gold:        var(--sweep-9);   /* gold: the primary action         */
  --gold-deep:   var(--sweep-8);
  --up:          #3ee0a8;
  --down:        #ff5c7a;

  /* the mark's own sweep, reusable as a fill */
  --grad-brand: linear-gradient(180deg, var(--sweep-1) 0%, var(--sweep-3) 22%,
                var(--sweep-5) 38%, var(--sweep-6) 48%, var(--sweep-8) 76%,
                var(--sweep-10) 100%);
  --grad-action: linear-gradient(135deg, var(--sweep-10) 0%, var(--sweep-9) 42%, var(--sweep-8) 100%);
  --grad-cyan:   linear-gradient(135deg, var(--sweep-5) 0%, var(--sweep-3) 100%);

  /* ---- shape ---- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---- depth ---- */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop:  0 18px 44px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-gold: 0 6px 20px -8px rgb(240 123 36 / 0.55);

  /* ---- type ---- */
  --face: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 150ms var(--ease);

  /* ---- metrics ---- */
  --shell: 1216px;
  --header-h: 56px;
}