/* =============================================================================
   Spin777 — Design Tokens
   Single source of truth. Cash App-inspired green primary on near-black,
   gold preserved as an accent for brand glyph + bonus surfaces.
   ============================================================================= */

:root {
  /* Surfaces */
  --se-bg:           #00C244;             /* not used as bg; reserved swatch */
  --se-page:         #0A0A0B;
  --se-elev-1:       #13141A;
  --se-elev-2:       #1A1B22;
  --se-elev-3:       #22232C;
  --se-elev-4:       #2C2D38;

  --se-line:         rgba(255,255,255,.07);
  --se-line-strong:  rgba(255,255,255,.14);

  /* Greens — primary */
  --se-green-50:   #E6FFF1;
  --se-green-200:  #6EF6A1;
  --se-green-300:  #4DEE85;
  --se-green-500:  #00D632;
  --se-green-600:  #00B82B;
  --se-green-700:  #009823;
  --se-green-glow: rgba(0,214,50,.32);

  /* Golds — accent */
  --se-gold-300:   #FFE9A8;
  --se-gold-500:   #F3D36B;
  --se-gold-600:   #D4A933;

  /* Reds + amber — status */
  --se-red-500:    #FF4D5E;
  --se-red-600:    #E63846;
  --se-amber-500:  #FFB020;

  /* Text */
  --se-text:         #F4F5F7;
  --se-text-muted:   #9AA0AB;
  --se-text-subtle:  #6B7280;
  --se-text-on-green:#062911;
  --se-text-on-gold: #1A1408;

  /* Spacing */
  --se-sp-1:  4px;
  --se-sp-2:  8px;
  --se-sp-3:  12px;
  --se-sp-4:  16px;
  --se-sp-5:  20px;
  --se-sp-6:  24px;
  --se-sp-8:  32px;
  --se-sp-10: 40px;
  --se-sp-12: 48px;

  /* Radius */
  --se-r-xs:   6px;
  --se-r-sm:  10px;
  --se-r-md:  14px;
  --se-r-lg:  18px;
  --se-r-xl:  22px;
  --se-r-2xl: 28px;
  --se-r-pill: 9999px;

  /* Type */
  --se-fs-11: 11px;
  --se-fs-12: 12px;
  --se-fs-13: 13px;
  --se-fs-14: 14px;
  --se-fs-15: 15px;
  --se-fs-16: 16px;
  --se-fs-18: 18px;
  --se-fs-20: 20px;
  --se-fs-24: 24px;
  --se-fs-28: 28px;
  --se-fs-32: 32px;
  --se-fs-40: 40px;
  --se-fs-48: 48px;

  --se-fw-md: 500;
  --se-fw-sb: 600;
  --se-fw-bd: 700;
  --se-fw-eb: 800;

  /* Shadows */
  --se-shadow-1: 0 2px 6px rgba(0,0,0,.30);
  --se-shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --se-shadow-3: 0 16px 40px rgba(0,0,0,.55);

  /* Layout */
  --se-mobile-max:    480px;
  --se-content-max:   1100px;
  --se-sidebar-w:     248px;
  --se-bottom-nav-h:  72px;
  --se-top-bar-h:     60px;

  /* z-index */
  --se-z-nav:    100;
  --se-z-drawer: 200;
  --se-z-modal:  300;
  --se-z-toast:  400;

  /* Motion */
  --se-ease:      cubic-bezier(.2, .8, .2, 1);
  --se-dur-fast:  120ms;
  --se-dur-med:   200ms;
  --se-dur-slow:  320ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--se-page);
  color: var(--se-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--se-fs-15);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html { overflow-x: hidden; }
body { min-height: 100vh; overflow-x: hidden; }

a { color: var(--se-green-500); text-decoration: none; }
a:hover { color: var(--se-green-300); }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--se-green-500);
  outline-offset: 2px;
  border-radius: var(--se-r-xs);
}

@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}