/* =============================================
   SQUARE — Design Tokens
   Light theme DEFAULT / Dark via [data-theme="dark"]
============================================= */

:root {
  /* ---- Backgrounds (Light default) ---- */
  --bg:        #F7F7FC;
  --bg-alt:    #EEEEF7;
  --surface:   #FFFFFF;
  --surface-2: #F2F2F9;
  --surface-3: #E8E8F2;

  /* ---- Borders ---- */
  --border:        rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.14);

  /* ---- Brand ---- */
  --primary:        #FF385C;
  --primary-dark:   #D42B48;
  --primary-glow:   rgba(255, 56, 92, 0.18);
  --secondary:      #7C5CFC;
  --secondary-glow: rgba(124, 92, 252, 0.15);
  --accent:         #FF9500;
  --accent-glow:    rgba(255, 149, 0, 0.18);
  --online:         #22C55E;

  /* ---- Text ---- */
  --text:   #0D0D1A;
  --text-2: #5C5C7A;
  --text-3: #9898B8;

  /* ---- Gradients ---- */
  --grad-story:     conic-gradient(from 180deg, #FF385C, #7C5CFC, #FFB347, #FF385C);
  --grad-primary:   linear-gradient(135deg, #FF385C 0%, #FF6B35 100%);
  --grad-secondary: linear-gradient(135deg, #7C5CFC 0%, #C77DFF 100%);
  --grad-card:      linear-gradient(180deg, transparent 30%, rgba(13,13,26,0.88) 100%);
  --grad-glass:     rgba(255, 255, 255, 0.88);

  /* ---- Typography ---- */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ---- Spacing scale ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ---- Radius ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ---- Layout ---- */
  --nav-h:      72px;
  --header-h:   60px;
  --sidebar-w:  240px;
  --max-w:      480px;
  --feed-max-w: 620px;
  --right-w:    300px;

  /* ---- Transitions ---- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --t-fast:      0.15s;
  --t-base:      0.3s;
  --t-slow:      0.5s;

  /* ---- Shadows (soft for light theme) ---- */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.05);
  --shadow-lg:        0 12px 40px rgba(0,0,0,0.10), 0 24px 60px rgba(0,0,0,0.07);
  --shadow-primary:   0 6px 20px var(--primary-glow);
  --shadow-secondary: 0 6px 20px var(--secondary-glow);
}

/* =============================================
   DARK THEME (opt-in via [data-theme="dark"])
============================================= */
[data-theme="dark"] {
  --bg:        #08080F;
  --bg-alt:    #0D0D1A;
  --surface:   #0F0F1E;
  --surface-2: #161628;
  --surface-3: #1E1E35;

  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text:   #F0F0F5;
  --text-2: #9090B0;
  --text-3: #505070;

  --grad-card:  linear-gradient(180deg, transparent 30%, rgba(8, 8, 15, 0.92) 100%);
  --grad-glass: rgba(10, 10, 20, 0.82);

  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.6);
}