/*
  Swevel Universal Media — Design Tokens
  Source of truth: DESIGN - SWEVEL.md (Design System v1.0)
*/
:root {
  /* ── Brand colors ─────────────────────────────────────── */
  --primary:      #32256F; /* Royal Purple */
  --secondary:    #6D3FD6; /* Violet */
  --accent:       #F5A623; /* Golden Orange */
  --accent-light: #FFD36C;
  --light-purple: #8B6BFF;

  /* ── Neutral ──────────────────────────────────────────── */
  --bg:      #FFFFFF;
  --surface: #F7F8FC;
  --border:  #E4E8F0;
  --gray:    #6B7280;
  --text:    #1E293B;

  /* ── Semantic ─────────────────────────────────────────── */
  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #DC2626;
  --info:    #2563EB;

  /* ── Dark surfaces (derived from Royal Purple for the
       dark/light section rhythm called for in the PRD) ──── */
  --ink-950: #0C0620;
  --ink-900: #150A30;
  --ink-800: #1E1042;
  --ink-700: #281457;

  /* ── Text on dark ─────────────────────────────────────── */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  rgba(255,255,255,.70);
  --on-dark-faint:  rgba(255,255,255,.46);
  --on-dark-line:   rgba(255,255,255,.14);

  /* ── Gradients ────────────────────────────────────────── */
  --grad-primary: linear-gradient(135deg, #32256F 0%, #6D3FD6 100%);
  --grad-dark:    linear-gradient(135deg, #24185C 0%, #32256F 100%);
  --grad-accent:  linear-gradient(135deg, #F5A623 0%, #FFD36C 100%);
  --grad-bg:      linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
  --grad-ink:     radial-gradient(ellipse 70% 55% at 18% 30%, rgba(109,63,214,.45) 0%, transparent 70%),
                   radial-gradient(ellipse 55% 45% at 84% 70%, rgba(139,107,255,.28) 0%, transparent 65%),
                   linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);

  /* ── Typography ───────────────────────────────────────── */
  --font-primary: 'Poppins', 'Inter', -apple-system, sans-serif;

  --fs-h1: clamp(34px, 5.2vw, 48px);
  --fs-h1-hero: clamp(34px, 5.6vw, 56px);
  --fs-h2: clamp(26px, 3.6vw, 40px);
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  /* ── Radius ───────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ── Shadow ───────────────────────────────────────────── */
  --sh-xs: 0 2px 4px rgba(0,0,0,.05);
  --sh-sm: 0 4px 12px rgba(0,0,0,.08);
  --sh-md: 0 8px 24px rgba(0,0,0,.10);
  --sh-lg: 0 16px 40px rgba(0,0,0,.12);
  --sh-purple-sm: 0 4px 20px rgba(50,37,111,.14);
  --sh-purple-md: 0 12px 36px rgba(50,37,111,.20);
  --sh-gold-sm: 0 4px 20px rgba(245,166,35,.24);
  --sh-gold-md: 0 12px 36px rgba(245,166,35,.32);

  /* ── Spacing (8pt grid) ───────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 40px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 96px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 260ms;

  /* ── Diagonal signature angle ─────────────────────────── */
  --diagonal: 24deg;
}