/* ============================================================
   DESIGN TOKENS — VEVARIA DESIGN SYSTEM (STRIPE-STYLE)
   ============================================================ */

:root {
  /* ============================================================
     BRAND COLORS
  ============================================================ */
  --brand-primary: #7b3ff2;
  --brand-primary-light: #9a66ff;
  --brand-primary-dark: #5a2bb8;

  /* ============================================================
     NEUTRAL PALETTE
  ============================================================ */
  --neutral-0: #ffffff;
  --neutral-50: #f8f9fb;
  --neutral-100: #eef0f4;
  --neutral-200: #d9dce2;
  --neutral-300: #b7bcc5;
  --neutral-400: #8e94a0;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* ============================================================
     DARK MODE BASE COLORS
  ============================================================ */
  --dark-0: #0b0c10;   /* updated for deeper background */
  --dark-1: #14171f;
  --dark-2: #1a1d27;
  --dark-3: #202432;
  --dark-border: #1e2230;

  /* ============================================================
     SEMANTIC SURFACES (DEFAULT = LIGHT MODE)
  ============================================================ */
  --surface-1: var(--neutral-0);
  --surface-2: var(--neutral-50);
  --surface-3: var(--neutral-100);
  --surface-4: var(--neutral-200);

  /* ============================================================
     SEMANTIC TEXT COLORS
  ============================================================ */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-400);

  /* ============================================================
     SEMANTIC BORDERS
  ============================================================ */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ============================================================
     ACCENT / BRAND SEMANTICS
  ============================================================ */
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-light);
  --accent-active: var(--brand-primary-dark);
  --accent-soft: rgba(123, 63, 242, 0.12);

  /* ============================================================
     SPACING SCALE
  ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ============================================================
     BORDER RADIUS
  ============================================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ============================================================
     TYPOGRAPHY
  ============================================================ */
  --font-sans: 'Geist', 'Inter', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* ============================================================
     SHADOWS
  ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

  /* ============================================================
     MOTION
  ============================================================ */
  --ease-default: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   LIGHT THEME
============================================================ */
.theme-light {
  --surface-1: var(--neutral-0);
  --surface-2: var(--neutral-50);
  --surface-3: var(--neutral-100);
  --surface-4: var(--neutral-200);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-400);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
}

/* ============================================================
   DARK THEME — STRIPE-STYLE (UPDATED)
============================================================ */
.theme-dark {
  /* Surfaces */
  --surface-1: var(--dark-0);  /* deep background */
  --surface-2: var(--dark-1);  /* cards */
  --surface-3: var(--dark-2);  /* raised */
  --surface-4: var(--dark-3);  /* hover */

  /* Text */
  --text-primary: var(--neutral-0);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-500);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Accent */
  --accent: var(--brand-primary-light);
  --accent-hover: var(--brand-primary);
  --accent-active: var(--brand-primary-dark);
  --accent-soft: rgba(154, 102, 255, 0.16);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}