/* =========================================================
   SurfX — Design Tokens (v1.0)
   Editorial-luxury × Quiet-tech, "glide" energy.
   ========================================================= */
:root{
  /* ------- Brand: Cobalt (refined from logo #2E59FB) ------- */
  --sx-cobalt-50:  #EEF1FF;
  --sx-cobalt-100: #DDE3FF;
  --sx-cobalt-200: #B7C2FF;
  --sx-cobalt-300: #8093FF;
  --sx-cobalt-400: #5572FF;
  --sx-cobalt-500: #2E50F5;   /* hero — refined: slightly deeper, slightly less violet, AAA on white */
  --sx-cobalt-600: #1E3CCC;
  --sx-cobalt-700: #1A30A0;
  --sx-cobalt-800: #14257A;
  --sx-cobalt-900: #0E1A52;

  /* ------- Warm secondaries (sand / coral / gold) ------- */
  --sx-sand-50:  #FAF7F1;
  --sx-sand-100: #F2ECDF;
  --sx-sand-200: #E2D7BE;
  --sx-sand-300: #C9B68A;     /* dune */
  --sx-coral-500: #F26B5B;    /* sunset coral — energy / signal */
  --sx-coral-700: #B8412F;
  --sx-gold-500: #C8A24C;     /* burnished gold — retail / premium */
  --sx-gold-700: #8E6E2A;

  /* ------- Neutrals: warm sand-leaning ink ------- */
  --sx-ink-50:  #F8F7F3;
  --sx-ink-100: #EFEDE6;
  --sx-ink-200: #DDDAD0;
  --sx-ink-300: #B9B6A9;
  --sx-ink-400: #8A8779;
  --sx-ink-500: #5C5A50;
  --sx-ink-600: #3D3C36;
  --sx-ink-700: #25241F;
  --sx-ink-800: #14130F;
  --sx-ink-900: #0A0907;

  /* ------- Semantic ------- */
  --sx-bg:       var(--sx-ink-50);
  --sx-fg:       var(--sx-ink-900);
  --sx-muted:    var(--sx-ink-500);
  --sx-line:     var(--sx-ink-200);
  --sx-card:     #FFFFFF;
  --sx-success:  #1F9D6B;
  --sx-warn:     #D98300;
  --sx-error:    var(--sx-coral-500);
  --sx-info:     var(--sx-cobalt-500);

  /* ------- Type ------- */
  --sx-font-display: "General Sans", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sx-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --sx-font-editorial:"Instrument Serif", "Times New Roman", serif;
  --sx-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --sx-font-arabic:  "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;

  /* ------- Spacing — 4pt base ------- */
  --sx-s-1: 4px;  --sx-s-2: 8px;  --sx-s-3: 12px; --sx-s-4: 16px;
  --sx-s-5: 24px; --sx-s-6: 32px; --sx-s-7: 48px; --sx-s-8: 64px; --sx-s-9: 96px;

  /* ------- Radius (lean curves to echo wave) ------- */
  --sx-r-xs: 4px; --sx-r-sm: 8px; --sx-r-md: 14px; --sx-r-lg: 22px; --sx-r-xl: 32px; --sx-r-pill: 999px;

  /* ------- Elevation: cobalt-tinted ------- */
  --sx-shadow-1: 0 1px 0 rgba(20,37,122,.06), 0 1px 2px rgba(20,37,122,.06);
  --sx-shadow-2: 0 2px 4px rgba(20,37,122,.06), 0 8px 24px rgba(20,37,122,.08);
  --sx-shadow-3: 0 8px 16px rgba(20,37,122,.10), 0 24px 56px rgba(20,37,122,.14);
  --sx-glow:     0 0 0 4px rgba(46,80,245,.18);

  /* ------- Motion ------- */
  --sx-ease-glide:  cubic-bezier(0.22, 1, 0.36, 1);
  --sx-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --sx-ease-snap:   cubic-bezier(0.5, 0, 0.1, 1);
  --sx-d-1: 120ms;  --sx-d-2: 220ms;  --sx-d-3: 360ms;  --sx-d-4: 560ms;
}