/* ============================================================================
   Atlas design tokens — extracted from the QClay Figma file, not eyeballed.
   File sBwJjOZxJviefvgh72H4o1. Every value below was read out of the node JSON
   via tools/figma/fx.py. Do not hand-tune: re-extract instead.
   ========================================================================= */

:root {
  /* --- type ---------------------------------------------------------------
     The file is drawn in SF Pro. It cannot be served as a webfont, but
     -apple-system / BlinkMacSystemFont render genuine SF Pro on macOS and iOS,
     which is how Atlas Prop already ships it. Inter is the fallback elsewhere
     (it was drawn as an SF substitute, so metrics stay close).
     Saans exists only under a TRIAL licence, so it maps onto the primary stack
     until it is bought — swap --font-alt when it is.                        */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-alt: var(--font-sans);
  --font-ui: 'DM Sans', var(--font-sans);

  /* Figma weight -> CSS weight. Applied globally, once. */
  --w-regular: 400;   /* Figma 400 */
  --w-medium:  500;   /* Figma 510 */
  --w-semi:    600;   /* Figma 590 */
  --w-bold:    700;   /* Figma 700 */
  --w-heavy:   800;   /* Figma 860 */

  /* --- brand --------------------------------------------------------------- */
  --af-teal:       #7CB1AC;
  --af-lime:       #E1FFA0;   /* Figma variable Accent/Lime */
  --af-lime-ink:   #17301F;   /* ink ON lime. never inherit link colour here. */
  --af-mint:       #A4E4DE;
  --af-deep:       #053F3B;
  --af-forest:     #223736;
  --af-ink-teal:   #001D21;
  --af-slate-teal: #263F42;   /* Figma variable Main/Light Green */
  --af-bar:        #0B2A27;   /* announcement bar */
  --af-hero-glow:  #051F1D;

  /* --- neutrals ------------------------------------------------------------ */
  --af-black:        #000000;
  --af-shell-top:    #303030;
  --af-shell-bottom: #0F0F0F;
  --af-card:         #222222;
  --af-card-2:       #2A2A2A;
  --af-pill-off:     #2D2D2D;
  --af-white:        #FFFFFF;
  --af-beige:        #F9F9F7;  /* Figma variable Main/Beige */
  --af-pale:         #F0F5F5;

  /* --- alpha whites, used constantly for hairlines and muted text ---------- */
  --w-04: rgba(255,255,255,.04);
  --w-06: rgba(255,255,255,.06);
  --w-07: rgba(255,255,255,.07);
  --w-08: rgba(255,255,255,.08);
  --w-10: rgba(255,255,255,.10);
  --w-14: rgba(255,255,255,.14);
  --w-16: rgba(255,255,255,.16);
  --w-17: rgba(255,255,255,.17);
  --w-25: rgba(255,255,255,.25);
  --w-32: rgba(255,255,255,.32);
  --w-40: rgba(255,255,255,.40);
  --w-56: rgba(255,255,255,.56);
  --w-60: rgba(255,255,255,.60);
  --w-80: rgba(255,255,255,.80);

  /* --- signature gradients ------------------------------------------------- */
  --af-shell:   linear-gradient(180deg, #303030 0%, #0F0F0F 100%);
  --af-card-g:  linear-gradient(161.7deg, #053F3B 0%, rgba(5,63,59,.27) 51.44%, #053F3B 100%);
  --af-lime-g:  linear-gradient(186.2deg, #E1FFA0 0%, rgba(225,255,160,.08) 41.83%, #E1FFA0 100%);
  /* the 1px gradient hairline on every glass surface. flattening this to a
     solid colour is the single most visible way to lose the look. */
  --af-hair:    linear-gradient(7.6deg, rgba(255,255,255,.11) 0%, #FFF 49.52%, rgba(255,255,255,.11) 100%);
  --af-hair-nav: linear-gradient(359.4deg, rgba(153,153,153,0) 0%, #FFF 100%);

  /* --- layout -------------------------------------------------------------- */
  --shell: 1512px;   /* design frame width */
  --page:  1432px;   /* content column */
  --gutter: 40px;

  /* --- radii, as drawn ----------------------------------------------------- */
  --r-pill: 100px;
  --r-round: 120px;
  --r-50: 50px;
  --r-48: 48px;
  --r-32: 32px;
  --r-28: 28px;
  --r-24: 24px;
  --r-20: 20px;
  --r-16: 16px;
  --r-12: 12px;
  --r-8: 8px;

  /* --- motion (see the web-motion skill) ----------------------------------- */
  --t-instant: 90ms;
  --t-fast:   160ms;
  --t-base:   240ms;
  --t-slow:   360ms;
  --t-page:   480ms;
  --e-out:    cubic-bezier(.16, 1, .30, 1);
  --e-in:     cubic-bezier(.70, 0, .84, 0);
  --e-inout:  cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   LONG-WORD SAFETY NET, 18 Sep 2026.

   This site is built from a 1512 Figma at fixed widths, and German is full of
   compounds that are simply wider than a phone. "Rückerstattungsrichtlinie" is
   186px of unbreakable text; in the footer link on /de/payouts it reached x 394
   on a 393 viewport and pushed the whole document to 400 — a real horizontal
   page scroll from one word. "Gebührenrückerstattungsrichtlinie" does the same
   to a 345px heading on /de/trading-rules at 353px.

   No amount of box-widening fixes a single word wider than the screen, so
   below the design breakpoint a word that cannot fit is allowed to break.
   `break-word` only acts when the word would otherwise overflow, so nothing
   that already fits — English included — changes. `hyphens: auto` puts the
   break at a sensible place where the browser has rules for the page's `lang`.

   Scoped to `max-width: 767px` on purpose: above it the fixed 1512 boxes and
   their measured line counts stand, and this must not reflow them.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  body {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* code, commands and URLs are the other unbreakable class, and they must
     break at any character rather than at a hyphenation point */
  code, kbd, samp, pre { overflow-wrap: anywhere; hyphens: none; }
}