/* ==========================================================================
   TovTalk Design Tokens
   Synchronized from Kotlin theme: TovTalkColors, TovTalkSpacing,
   TovTalkShapes, TovTalkTypography, TovTalkAnimations
   ========================================================================== */

/* --- Shared tokens (theme-independent) ----------------------------------- */
:root {
  /* Brand colors */
  --brand: #2563EB;
  --brand-light: #3B82F6;
  --brand-dark: #1D4ED8;
  --brand-subtle: #DBEAFE;
  --gradient-start: #2563EB;
  --gradient-end: #3B82F6;

  /* Semantic colors */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --like: #2563EB;
  --gift: #E91E63;
  --whatsapp: #25D366;
  --chat-tick-read: #007AFF;
  --chat-tick-sent: #8E8E93;

  /* Spacing */
  --space-xxxs: 2px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --screen-padding: 16px;
  --card-padding: 16px;
  --top-bar-height: 56px;
  --bottom-nav-height: 64px;
  --rail-width: 72px;

  /* Avatars */
  --avatar-xs: 24px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 56px;
  --avatar-xl: 80px;
  --avatar-xxl: 120px;
  --avatar-profile: 72px;

  /* Icons */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;

  /* Buttons */
  --btn-height-sm: 32px;
  --btn-height-md: 44px;
  --btn-height-lg: 56px;
  --min-touch: 48px;

  /* Video */
  --video-action-btn: 40px;
  --video-play-btn: 72px;
  --video-play-icon: 36px;

  /* Dividers & borders */
  --divider-thickness: 0.5px;
  --border-width: 2px;

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --radius-chip: 20px;
  --radius-input: 12px;
  --radius-badge: 10px;
  --radius-thumbnail: 8px;

  /* Typography – families */
  --font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-hebrew: "Open Sans Hebrew", "Heebo", var(--font-family);

  /* Typography – sizes */
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-display-sm: 28px;
  --text-headline-lg: 24px;
  --text-headline-md: 20px;
  --text-headline-sm: 18px;
  --text-title-lg: 18px;
  --text-title-md: 16px;
  --text-title-sm: 14px;
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 12px;
  --text-label-lg: 14px;
  --text-label-md: 12px;
  --text-label-sm: 10px;
  --text-caption: 11px;
  --text-username: 15px;
  --text-stats: 13px;
  --text-video-overlay: 14px;

  /* Typography – weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Animations – durations */
  --duration-instant: 0ms;
  --duration-fastest: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;
  --duration-slowest: 600ms;

  /* Animations – easings */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.0, 0.0, 0.2, 1.0);
}

/* --- Dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #0A0A0A;
  --surface-elevated: #141414;
  --surface-overlay: #1C1C1E;
  --border: #2C2C2E;
  --text-primary: #FFFFFF;
  --text-secondary: #AAAAAA;
  --text-tertiary: #666666;
  --text-disabled: #444444;
  --text-on-brand: #FFFFFF;
  --overlay-light: rgba(255, 255, 255, 0.20);
  --overlay-medium: rgba(255, 255, 255, 0.40);
  --overlay-dark: rgba(0, 0, 0, 0.60);
  --overlay-scrim: rgba(0, 0, 0, 0.70);
  --video-gradient-top: rgba(0, 0, 0, 0.30);
  --video-gradient-bottom: rgba(0, 0, 0, 0.60);
  --drawer-scrim: rgba(0, 0, 0, 0.45);
  --drawer-surface: #121212;
  --chat-bubble-theirs: #2C2C2E;
}

/* --- Light theme --------------------------------------------------------- */
:root[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --surface-elevated: #FFFFFF;
  --surface-overlay: #F2F2F7;
  --border: #E5E5EA;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-disabled: #CCCCCC;
  --text-on-brand: #FFFFFF;
  --overlay-light: rgba(255, 255, 255, 0.20);
  --overlay-medium: rgba(255, 255, 255, 0.40);
  --overlay-dark: rgba(0, 0, 0, 0.40);
  --overlay-scrim: rgba(0, 0, 0, 0.60);
  --video-gradient-top: rgba(0, 0, 0, 0.20);
  --video-gradient-bottom: rgba(0, 0, 0, 0.40);
  --drawer-scrim: rgba(0, 0, 0, 0.45);
  --drawer-surface: #121212;
  --chat-bubble-theirs: #E8E8ED;
}

/* --- System preference fallback (before JS sets data-theme) -------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #000000;
    --bg-secondary: #0A0A0A;
    --surface-elevated: #141414;
    --surface-overlay: #1C1C1E;
    --border: #2C2C2E;
    --text-primary: #FFFFFF;
    --text-secondary: #AAAAAA;
    --text-tertiary: #666666;
    --text-disabled: #444444;
    --text-on-brand: #FFFFFF;
    --overlay-light: rgba(255, 255, 255, 0.20);
    --overlay-medium: rgba(255, 255, 255, 0.40);
    --overlay-dark: rgba(0, 0, 0, 0.60);
    --overlay-scrim: rgba(0, 0, 0, 0.70);
    --video-gradient-top: rgba(0, 0, 0, 0.30);
    --video-gradient-bottom: rgba(0, 0, 0, 0.60);
    --drawer-scrim: rgba(0, 0, 0, 0.45);
    --drawer-surface: #121212;
    --chat-bubble-theirs: #2C2C2E;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --surface-elevated: #FFFFFF;
    --surface-overlay: #F2F2F7;
    --border: #E5E5EA;
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-disabled: #CCCCCC;
    --text-on-brand: #FFFFFF;
    --overlay-light: rgba(255, 255, 255, 0.20);
    --overlay-medium: rgba(255, 255, 255, 0.40);
    --overlay-dark: rgba(0, 0, 0, 0.40);
    --overlay-scrim: rgba(0, 0, 0, 0.60);
    --video-gradient-top: rgba(0, 0, 0, 0.20);
    --video-gradient-bottom: rgba(0, 0, 0, 0.40);
    --drawer-scrim: rgba(0, 0, 0, 0.45);
    --drawer-surface: #121212;
    --chat-bubble-theirs: #E8E8ED;
  }
}