/* manaMOBILE cellular sub-site — design tokens (single source of truth).
 *
 * Direction B1 "Deep Ocean Premium": dark throughout, one sunset-orange accent.
 * Link this before cellular.css. Pages that need the palette but not the shell
 * (e.g. /confirmation, which has no header or hero) link this one only.
 *
 * The legacy names are kept and revalued rather than deleted, so any rule still
 * referencing --ocean / --sand / --volcanic keeps working instead of silently
 * falling back to an inherited or invalid value.
 */

/* ── Satoshi (ITF Free Font License v2.0) ──
   Ship the variable font only: one file covers weights 300-900, so this is a
   single 42KB request instead of five static ones. Licence permits commercial
   use and self-hosting; see the FFL bundled with the download. */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/Satoshi-Variable.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:italic;font-weight:300 900;font-display:swap;src:url('/fonts/Satoshi-VariableItalic.woff2') format('woff2')}

:root {
  /* ── Surface ramp ── */
  --abyss: #060f16;          /* page base */
  --deep: #0b1c27;           /* nav / footer band */
  --surface: #102833;        /* cards, inputs */
  --surface-2: #16323f;      /* elevated / hover */

  /* ── Legacy colour names, revalued for dark ── */
  --ocean: #ff7a3d;          /* was the primary navy; now the accent */
  --ocean-2: #ff8f5c;
  --ocean-deep: #060f16;     /* was footer/dark bg; now the page base */
  --sunset: #ff7a3d;
  --sunset-2: #ff9a66;
  --sunset-deep: #e8541c;
  --sand: #f2f7f9;           /* retired as a background; kept as a light neutral */
  --sand-2: #16323f;         /* was a border tone; now the elevated surface */
  --volcanic: #f2f7f9;       /* was body text; now the primary text tone */
  --reef: #4ec98a;           /* success, brightened for dark */
  --paper: #102833;          /* was #fff; now the card surface */

  /* ── Text ── */
  --foam: #f2f7f9;           /* 16:1 on abyss */
  --mist: #a8bfca;           /* 8:1 on abyss */
  --muted: #a8bfca;

  /* ── Structure ── */
  --line: rgba(255, 255, 255, .09);
  --rule: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);

  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ── Type ── */
  --font-display: "Satoshi", system-ui, -apple-system, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, sans-serif;
  --font-numerals: "Satoshi", system-ui, sans-serif;

  /* ── Spacing scale (4px base) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ── Radius ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;

  /* ── Container ── */
  --maxw: 1120px;
}