/* ============================================================
   SEXTING AI — Design Tokens
   Adapted from magi1.ai design system
   ============================================================ */

:root {
  /* ── Color: Text ── */
  --color-text-primary: #ffffff;
  --color-text-secondary: #e2e8f0;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0a0a0a;

  /* ── Color: Surface ── */
  --color-surface-base: #000000;
  --color-surface-muted: #0a0a0a;
  --color-surface-raised: #111111;
  --color-surface-strong: #1a1a1a;
  --color-surface-card: #0d0d0d;

  /* ── Color: Brand Accent ── */
  --color-accent-pink: #f43f5e;
  --color-accent-rose: #e11d48;
  --color-accent-fuchsia: #d946ef;
  --color-accent-purple: #a855f7;
  --color-accent-violet: #7c3aed;

  /* ── Color: Gradient ── */
  --gradient-brand: linear-gradient(135deg, #f43f5e 0%, #d946ef 50%, #a855f7 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(244,63,94,0.15) 0%, rgba(168,85,247,0.15) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,85,247,0.18) 0%, rgba(244,63,94,0.08) 40%, transparent 70%);
  --gradient-card: linear-gradient(145deg, rgba(244,63,94,0.06) 0%, rgba(168,85,247,0.06) 100%);
  --gradient-text: linear-gradient(135deg, #f43f5e 0%, #d946ef 40%, #a855f7 80%, #7c3aed 100%);

  /* ── Color: Border ── */
  --color-border-default: #1e1e1e;
  --color-border-muted: #2a2a2a;
  --color-border-strong: #374151;
  --color-border-accent: rgba(244, 63, 94, 0.4);
  --color-border-accent-purple: rgba(168, 85, 247, 0.35);

  /* ── Color: Status ── */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* ── Typography: Family ── */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* ── Typography: Size ── */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 60px;
  --font-size-6xl: 72px;

  /* ── Typography: Weight ── */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── Typography: Line Height ── */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ── Border Radius ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-3: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
  --shadow-glow-pink: 0 0 20px rgba(244,63,94,0.35), 0 0 40px rgba(244,63,94,0.15);
  --shadow-glow-purple: 0 0 20px rgba(168,85,247,0.35), 0 0 40px rgba(168,85,247,0.15);
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-card-hover: 0 0 0 1px rgba(244,63,94,0.3), 0 8px 32px rgba(244,63,94,0.12), 0 20px 40px rgba(0,0,0,0.6);

  /* ── Motion ── */
  --duration-instant: 150ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-narrow: 800px;
  --nav-height: 72px;
}