/* =============================================
   THEIS Design Tokens — Apple Dark Mode
   ============================================= */
:root {
  /* Primary Accent — Softer, Apple-like red */
  --primary: #FF375F;
  --primary-light: #FF6482;
  --primary-dark: #D42B4D;
  --primary-rgb: 255, 55, 95;

  /* Secondary Accent — Muted indigo */
  --accent: #5E5CE6;
  --accent-light: #7D7AFF;
  --accent-rgb: 94, 92, 230;

  /* Backgrounds & Surfaces */
  --bg: #000000;
  --bg-elevated: #1C1C1E;
  --surface: rgba(28, 28, 30, 0.72);
  --surface-light: rgba(44, 44, 46, 0.65);
  --surface-hover: rgba(58, 58, 60, 0.5);

  /* Glassmorphism — Deep, premium */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-white: rgba(255, 255, 255, 0.04);
  --glass-white-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --glass-blur: blur(40px);
  --glass-blur-heavy: blur(64px);

  /* Text — Apple SF palette */
  --text-primary: #F5F5F7;
  --text-secondary: #86868B;
  --text-tertiary: #636366;
  --text-muted: #48484A;

  /* Status Colors — Apple-style (softer, more vibrant) */
  --success: #30D158;
  --warning: #FFD60A;
  --error: #FF453A;
  --info: #0A84FF;

  /* Role Colors — Muted, refined */
  --role-copy: #FF9F0A;
  --role-design: #FF6482;
  --role-social: #30D158;
  --role-tiktok: #FF2D55;
  --role-web: #5E5CE6;
  --role-app: #64D2FF;
  --role-yt: #FF3B30;
  --role-admin: #BF5AF2;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

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

  /* Shadows — Subtle depth for dark mode */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-primary: 0 4px 16px rgba(var(--primary-rgb), 0.3);
  --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.4);

  /* Transitions — Apple-feel curves */
  --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-normal: 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-bounce: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 92px;
  --mobile-tab-height: 56px;
  --content-max-width: 1440px;

  /* Breakpoints (for reference — used in @media) */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;
}

/* Light Theme overrides */
body.theme-light {
  --bg: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --surface: rgba(255, 255, 255, 0.8);
  --surface-light: rgba(242, 242, 247, 0.9);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-white: rgba(255, 255, 255, 0.8);
  --glass-white-hover: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-hover: rgba(0, 0, 0, 0.12);
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #8E8E93;
  --text-muted: #AEAEB2;
  --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}