/* ============================================================================
 * tokens.css — the single source of truth for colour, type, space and motion.
 *
 * One accent: violet. Teal belongs to the mark and appears in pattern art at
 * no more than a tenth of a composition. Navy is a ground, not an accent.
 * Nothing here is a gradient except the mark itself.
 * ==========================================================================*/

:root {
  /* --- Ground: navy. Flat steps, never a radial glow. ---------------------*/
  --navy-900: #0D1333;
  --navy-800: #131B45;
  --navy-700: #1E2761;
  --navy-600: #2A3572;

  /* --- The accent: violet, from the wallet mark. --------------------------*/
  --violet: #6F3CC3;
  --violet-deep: #52299B;
  --violet-soft: #8B5FD6;
  --violet-tint: #F0E9FA;

  /* --- Teal: mark and pattern art only. Never text, never a button. -------*/
  --teal: #60BCCA;
  --teal-tint: #E4F6F8;

  /* --- Ink on light ------------------------------------------------------*/
  --ink: #172033;
  --ink-mute: #5F6F86;
  --ink-soft: #8793A6;

  /* --- Light surfaces ----------------------------------------------------*/
  --page: #F4F7FB;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --line: #DCE4EF;
  --line-strong: #B8C5D8;

  /* --- On dark -----------------------------------------------------------*/
  --on-dark: #F2F5FC;
  --on-dark-mute: #A9B6D2;
  --on-dark-line: rgba(255, 255, 255, 0.16);

  /* --- Status. Meaning only, never decoration. ---------------------------*/
  --ok: #16835F;
  --warn: #B56B12;
  --danger: #C2413A;
  --warn-tint: #FEF8EE;
  --warn-line: #F0DCC0;
  --warn-ink: #7C5410;

  /* --- Hardware ----------------------------------------------------------*/
  --chassis: #14161D;              /* phone body. Never #000. */

  /* --- The mark's gradient. Mark and OG ground only. ----------------------*/
  --grad-mark: linear-gradient(135deg, #6930C3 0%, #60BCCA 100%);

  /* --- Shadows, tinted to the ground they sit on -------------------------*/
  --shadow-sm: 0 1px 2px rgba(34, 61, 103, 0.06);
  --shadow: 0 8px 18px rgba(34, 61, 103, 0.08);
  --shadow-lg: 0 12px 30px rgba(34, 61, 103, 0.10);
  --shadow-xl: 0 24px 60px rgba(34, 61, 103, 0.14);
  --shadow-dark: 0 24px 60px rgba(3, 8, 40, 0.45);
  --shadow-frame: 0 34px 80px -24px rgba(13, 19, 51, 0.44);

  /* --- Radii -------------------------------------------------------------*/
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-phone: 44px;

  /* --- Space: 4px scale --------------------------------------------------*/
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 48px;  --s10: 64px;
  --s11: 80px; --s12: 96px; --s13: 120px; --s14: 160px;

  /* --- Fluid rhythm ------------------------------------------------------*/
  --space-section: clamp(3.5rem, 2rem + 5vw, 7.5rem);
  --space-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

  /* --- Containers --------------------------------------------------------*/
  --container: 1200px;
  --container-wide: 1320px;
  --container-text: 68ch;

  /* --- Type --------------------------------------------------------------*/
  --font-display: 'Schibsted Grotesk', 'Schibsted Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', 'Figtree Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-h1: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  --t-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.9rem);
  --t-h4: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-eyebrow: 0.6875rem;

  --lh-tight: 1.06;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --tracking-display: -0.022em;
  --tracking-eyebrow: 0.14em;

  /* --- Motion ------------------------------------------------------------*/
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 150ms;
  --d-ui: 200ms;
  --d-reveal: 600ms;
  --d-cross: 400ms;
  /* The glass navigation: a capsule gliding between items, a dock opening.
   * Longer than an interface change, and eased like a spring that has already
   * lost its bounce. */
  --ease-glass: cubic-bezier(0.32, 0.72, 0, 1);
  --d-glass: 320ms;

  /* --- Focus -------------------------------------------------------------*/
  --focus: var(--violet);
  --focus-on-dark: var(--teal);
}

/* ---------------------------------------------------------------------------
 * Replica tokens. Scoped to .rep so the wallet's own palette can never leak
 * into marketing chrome. Values are the product's, from
 * assets/source/replica/digital-wallet-tokens.json.
 * -------------------------------------------------------------------------*/
.rep {
  --dw-hero-from: #7B3FE4;
  --dw-hero-to: #8B5CF6;
  --dw-hero-personal-from: #6D3BD1;
  --dw-hero-personal-to: #5566E6;
  --dw-purple: #6F3CC3;
  --dw-purple-deep: #52299B;
  --dw-purple-tint: #F0E9FA;

  --dw-topup: #16A34A;
  --dw-topup-deep: #15803D;
  --dw-transfer: #2563EB;
  --dw-transfer-deep: #1D4ED8;
  --dw-withdraw: #F97316;
  --dw-withdraw-deep: #EA580C;

  --dw-pos: #16A34A;
  --dw-neg: #DC2626;
  --dw-banner: #FEF6D9;
  --dw-banner-border: #FAE29A;
  --dw-banner-text: #7C5410;

  --dw-heading: #2F67D8;
  --dw-ink: #1F2433;
  --dw-ink-soft: #6B7280;
  --dw-card-line: #EDF0F5;
  --dw-surface: #FFFFFF;
  --dw-surface-subtle: #F8FAFC;
  --dw-bg: #F3F5FB;
  --dw-line: #DCE4EF;
  --dw-line-strong: #B8C5D8;
  --dw-text: #172033;
  --dw-text-muted: #5F6F86;
  --dw-text-soft: #8793A6;
  --dw-primary: #2F67D8;
  --dw-primary-dark: #204CA7;
  --dw-primary-tint: #E7EFFF;

  --dw-pill-settled-fg: #15803D;   --dw-pill-settled-bg: #DCFCE7;
  --dw-pill-pending-fg: #B45309;   --dw-pill-pending-bg: #FEF3C7;
  --dw-pill-paidout-fg: #4F46E5;   --dw-pill-paidout-bg: #E0E7FF;
  --dw-pill-withdrawn-fg: #7C3AED; --dw-pill-withdrawn-bg: #EDE9FE;
  --dw-pill-rejected-fg: #DC2626;  --dw-pill-rejected-bg: #FEE2E2;
  --dw-pill-neutral-fg: #64748B;   --dw-pill-neutral-bg: #EEF2F7;

  --dw-r-xs: 4px; --dw-r-sm: 6px; --dw-r-md: 8px; --dw-r-lg: 12px; --dw-r-pill: 999px;
  --dw-shadow-soft: 0 12px 30px rgba(34, 61, 103, 0.10);
  --dw-shadow-panel: 0 8px 18px rgba(34, 61, 103, 0.08);
  --dw-shadow-raised: 0 18px 44px rgba(34, 61, 103, 0.16);
}