/* ==========================================================================
   VYBE · DESIGN TOKENS (landing)
   Ported from vybeadmin/public/assets/css/vybe-tokens.css; dark values follow
   the customer app (vybeapp/lib/design_system/foundations/vybe_colors.dart).
   Tokens only — no component styling. Load before style.css.
   ========================================================================== */

:root {
  /* Brand palette */
  --vybe-ink-900: #050308;
  --vybe-ink-800: #12081E;
  --vybe-ink-700: #3A0F63;
  --vybe-purple:  #7B2FF7;
  --vybe-pink:    #F0399F;
  --vybe-cyan:    #2CE9FF;
  --vybe-paper:   #F7F4FB;
  --vybe-ink:     #1A0B2B;

  --vybe-purple-50:  #F4ECFE;
  --vybe-purple-100: #E8D9FD;
  --vybe-purple-200: #D0B4FB;
  --vybe-purple-400: #9A5CF9;
  --vybe-purple-500: #7B2FF7;
  --vybe-purple-600: #6A1FE0;
  --vybe-purple-700: #5817BC;

  --vybe-pink-50:  #FEECF5;
  --vybe-pink-ink: #C9247F;   /* pink for text on light */
  --vybe-cyan-ink: #007A8F;   /* cyan for text on light */

  /* Gradients — 135deg is fixed by the logo system */
  --vybe-gradient: linear-gradient(135deg, #3A0F63 0%, #7B2FF7 50%, #F0399F 100%);
  --vybe-gradient-cta: linear-gradient(135deg, #7B2FF7 0%, #F0399F 100%);
  --vybe-gradient-soft: linear-gradient(135deg, #F4ECFE 0%, #FEECF5 100%);
  --vybe-gradient-night: linear-gradient(135deg, #3A0F63 0%, #12081E 100%);
  --vybe-gradient-splash: radial-gradient(120% 120% at 50% 15%, #5B1DA8 0%, #2A0C48 45%, #0B0512 100%);

  /* Semantic roles — LIGHT (default) */
  --vybe-bg:             var(--vybe-paper);
  --vybe-bg-sunken:      #F1ECF8;
  --vybe-surface:        #FFFFFF;
  --vybe-surface-raised: #FFFFFF;
  --vybe-surface-brand:  var(--vybe-purple-50);

  --vybe-border:         #E3DCED;
  --vybe-border-strong:  #D3C6E6;
  --vybe-border-brand:   var(--vybe-purple-200);

  --vybe-text:           var(--vybe-ink);
  --vybe-text-secondary: #5B4A72;
  --vybe-text-muted:     #6E6280;
  --vybe-text-placeholder: #8E82A0;
  --vybe-text-brand:     #5A18C4;
  --vybe-text-accent:    var(--vybe-pink-ink);
  --vybe-text-on-brand:  #FFFFFF;

  --vybe-action:         var(--vybe-purple-500);
  --vybe-action-hover:   #6B22E0;
  --vybe-action-active:  #5A18C4;
  --vybe-action-subtle:  #E4DAF7;
  --vybe-focus-ring:     0 0 0 3px rgba(123, 47, 247, 0.28);

  --vybe-danger:         #C81E1E;
  --vybe-success:        #077D56;

  /* Typography */
  --vybe-font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vybe-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --vybe-tracking-display: -0.035em;
  --vybe-tracking-tight: -0.02em;
  --vybe-tracking-eyebrow: 0.14em;
  --vybe-tracking-tagline: 0.3em;

  /* Radii */
  --vybe-radius-sm: 8px;
  --vybe-radius-md: 12px;
  --vybe-radius-lg: 16px;
  --vybe-radius-xl: 20px;
  --vybe-radius-2xl: 28px;
  --vybe-radius-pill: 999px;

  /* Elevation — ink-tinted, never neutral black */
  --vybe-shadow-1: 0 1px 2px rgba(42, 12, 72, 0.06), 0 2px 8px rgba(42, 12, 72, 0.06);
  --vybe-shadow-2: 0 2px 4px rgba(42, 12, 72, 0.06), 0 6px 16px rgba(42, 12, 72, 0.10);
  --vybe-shadow-3: 0 12px 32px rgba(42, 12, 72, 0.10);
  --vybe-shadow-brand: 0 8px 20px rgba(123, 47, 247, 0.28);

  /* Motion */
  --vybe-duration-fast: 100ms;
  --vybe-duration: 180ms;
  --vybe-duration-slow: 260ms;
  --vybe-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */

  --vybe-touch-target: 48px;
}

/* Semantic roles — DARK (customer app values) */
[data-theme="dark"] {
  --vybe-bg:             var(--vybe-ink-900);
  --vybe-bg-sunken:      #0B0512;
  --vybe-surface:        #12081E;
  --vybe-surface-raised: #1A0B2B;
  --vybe-surface-brand:  #241238;

  --vybe-border:         #2A1B3D;
  --vybe-border-strong:  #6F5C8C;
  --vybe-border-brand:   rgba(138, 59, 245, 0.55);

  --vybe-text:           #F4EEFA;
  --vybe-text-secondary: #C6BBD6;
  --vybe-text-muted:     #A79BB8;
  --vybe-text-placeholder: #8E82A0;
  --vybe-text-brand:     #B983FF;
  --vybe-text-accent:    #FF74BF;

  --vybe-action:         #8A3BF5;
  --vybe-action-hover:   #9450FA;
  --vybe-action-active:  #7B2FF7;
  --vybe-action-subtle:  #241238;

  --vybe-danger:         #FF6B6B;
  --vybe-success:        #3DD9A0;

  --vybe-shadow-1: none;
  --vybe-shadow-2: 0 6px 12px rgba(0, 0, 0, 0.40);
  --vybe-shadow-3: 0 12px 28px rgba(0, 0, 0, 0.60);
}