/* ═══════════════════════════════════════════════════════════
   GayOut — Design Tokens  (loaded before main.css)
   Single source of truth for all visual decisions.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Brand ─────────────────────────────────────────────── */
  --brand-50:   #F5EDFB;
  --brand-100:  #E9D5F8;
  --brand-200:  #D4ACF1;
  --brand-300:  #B66FE0;
  --brand-400:  #9B44CF;
  --brand-500:  #8B3DBE;   /* primary */
  --brand-600:  #7A33A8;
  --brand-700:  #6B2A95;   /* primary-dark */
  --brand-800:  #531F76;
  --brand-900:  #3A1554;

  /* ── Aliases (backward compat + semantic) ──────────────── */
  --color-primary:       var(--brand-500);
  --color-primary-hover: var(--brand-700);
  --color-primary-light: var(--brand-300);
  --color-primary-50:    var(--brand-50);

  /* legacy aliases kept for existing code */
  --primary:       var(--brand-500);
  --primary-dark:  var(--brand-700);
  --primary-light: var(--brand-300);
  --primary-50:    var(--brand-50);

  /* ── Surface ────────────────────────────────────────────── */
  --color-bg:          #FAFAF8;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle:   #F3F4F6;
  --color-border:      #E5E7EB;
  --color-border-subtle: #F3F4F6;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:         #111827;
  --color-text-secondary: #374151;
  --color-text-muted:   #6B7280;
  --color-text-subtle:  #9CA3AF;
  --color-text-inverse: #FFFFFF;

  /* ── State colors ───────────────────────────────────────── */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #2563EB;

  /* ── Pride Gradient ─────────────────────────────────────── */
  --gradient-pride: linear-gradient(90deg,
    #E91E63 0%,
    #FF9800 16%,
    #FFC107 33%,
    #4CAF50 50%,
    #2196F3 67%,
    #9C27B0 83%,
    #8B3DBE 100%);

  /* legacy */
  --pride: var(--gradient-pride);

  /* ── Brand gradients ────────────────────────────────────── */
  --gradient-brand:   linear-gradient(135deg, var(--brand-500), var(--brand-700));
  --gradient-dark:    linear-gradient(135deg, #1a1034 0%, #2d1554 40%, #1a2040 100%);
  --gradient-hero:    linear-gradient(to bottom,rgba(0,0,0,.42) 0%,rgba(0,0,0,.58) 60%,rgba(0,0,0,.72) 100%);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12);
  --shadow-xl:  0 24px 60px rgba(0,0,0,.18);
  --shadow-2xl: 0 40px 80px rgba(0,0,0,.22);
  --shadow-brand: 0 4px 14px rgba(139,61,190,.35);
  --shadow-brand-lg: 0 12px 40px rgba(139,61,190,.25);

  /* ── Border radius ──────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  28px;
  --radius-full: 999px;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Container widths ───────────────────────────────────── */
  --max-w-xs:      480px;
  --max-w-sm:      640px;
  --max-w-md:      768px;
  --max-w-lg:      1024px;
  --max-w-content: 1200px;
  --max-w-wide:    1400px;

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-sticky:  40;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
  --z-menu:    990;
  --z-cookie:  9999;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 0.1s;
  --duration-fast:    0.2s;
  --duration-base:    0.3s;
  --duration-slow:    0.5s;
  --duration-slower:  0.7s;

  /* ── Typography scale ───────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose:  1.8;

  /* ── Component tokens (derived from above) ───────────────── */
  --card-radius:    var(--radius-lg);
  --card-shadow:    var(--shadow-sm);
  --card-border:    1px solid var(--color-border-subtle);
  --card-bg:        var(--color-bg-elevated);

  --btn-radius:     var(--radius-md);
  --btn-shadow:     var(--shadow-brand);

  --input-radius:   var(--radius-md);
  --input-border:   2px solid var(--color-border);
  --input-focus-shadow: 0 0 0 4px rgba(139,61,190,.1);

  --header-height:  65px;
}

/* ── Dark mode: system preference (unless user chose light) ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:              #0A0A0C;
    --color-bg-elevated:     #161618;
    --color-bg-subtle:       #222226;
    --color-border:          #3A3A40;
    --color-border-subtle:   #28282E;
    --color-text:            #F4F4F5;
    --color-text-secondary:  #E4E4E7;
    --color-text-muted:      #A1A1AA;
    --color-text-subtle:     #71717A;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
    --shadow-md:   0 4px 12px rgba(0,0,0,.55);
    --shadow-lg:   0 12px 32px rgba(0,0,0,.65);
    --shadow-brand: 0 4px 14px rgba(139,61,190,.5);
    --card-border: 1px solid var(--color-border);
  }
}

/* ── Dark mode: explicit user toggle ─────────────────────── */
:root[data-theme="dark"] {
  --color-bg:              #0A0A0C;
  --color-bg-elevated:     #161618;
  --color-bg-subtle:       #222226;
  --color-border:          #3A3A40;
  --color-border-subtle:   #28282E;
  --color-text:            #F4F4F5;
  --color-text-secondary:  #E4E4E7;
  --color-text-muted:      #A1A1AA;
  --color-text-subtle:     #71717A;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,.55);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.65);
  --shadow-brand: 0 4px 14px rgba(139,61,190,.5);
  --card-border: 1px solid var(--color-border);
}

/* ── Utility classes using tokens ────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.bg-elevated  { background: var(--color-bg-elevated); }
.shadow-brand { box-shadow: var(--shadow-brand); }

.transition-base {
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}
.transition-fast {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}