/**
 * Design Tokens - CSS Variables
 * 
 * This file defines all design tokens as CSS variables for the VitaTalk design system.
 * These variables support both light and dark modes.
 * 
 * Usage:
 *   color: var(--color-primary);
 *   background: var(--color-gradient-primary);
 */

/* ===== Light Mode (Default) ===== */
:root {
  /* ===== Colors ===== */
  
  /* Primary Colors */
  --color-primary: #00A693;
  --color-primary-light: #48d1cc;
  --color-primary-dark: #007a6b;
  --color-primary-lighter: #6dddd3;
  --color-primary-darker: #2fb3a8;
  --color-primary-contrast-text: #ffffff; /* رنگ متن برای استفاده روی gradient primary */
  
  /* Secondary Colors */
  --color-secondary: #48d1cc;
  --color-secondary-light: #6dddd3;
  --color-secondary-dark: #2fb3a8;
  
  /* Gradients */
  --color-gradient-primary: linear-gradient(135deg, #00A693 0%, #48d1cc 100%);
  --color-gradient-primary-reverse: linear-gradient(135deg, #48d1cc 0%, #00A693 100%);
  --color-gradient-primary-horizontal: linear-gradient(90deg, #00A693 0%, #48d1cc 100%);
  --color-gradient-primary-horizontal-reverse: linear-gradient(90deg, #48d1cc 0%, #00A693 100%);
  
  /* Background Colors - Light Mode */
  --color-background-default: #ffffff;
  --color-background-paper: #f5f5f5;
  --color-background-elevated: #ffffff;
  
  /* Text Colors - Light Mode */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: rgba(26, 26, 26, 0.7);
  --color-text-disabled: rgba(26, 26, 26, 0.5);
  
  /* Glassmorphism Colors - Light Mode */
  --color-glass-background: rgba(255, 255, 255, 0.7);
  --color-glass-background-hover: rgba(255, 255, 255, 0.85);
  --color-glass-border: rgba(0, 166, 147, 0.2);
  --color-glass-border-hover: rgba(0, 166, 147, 0.4);
  
  /* Shadow Colors */
  --color-shadow-primary: rgba(0, 166, 147, 0.2);
  --color-shadow-primary-hover: rgba(0, 166, 147, 0.3);
  --color-shadow-glass: rgba(0, 0, 0, 0.1);
  --color-shadow-glass-hover: rgba(0, 166, 147, 0.2);
  
  /* Scrollbar Colors - Light Mode */
  --color-scrollbar-track: rgba(0, 0, 0, 0.05);
  --color-scrollbar-thumb: linear-gradient(135deg, rgba(0, 166, 147, 0.4) 0%, rgba(72, 209, 204, 0.4) 100%);
  --color-scrollbar-thumb-hover: linear-gradient(135deg, rgba(0, 166, 147, 0.6) 0%, rgba(72, 209, 204, 0.6) 100%);
  
  /* Background Gradients - Light Mode */
  --color-background-gradient-start: rgba(0, 166, 147, 0.08);
  --color-background-gradient-end: rgba(72, 209, 204, 0.08);
  
  /* ===== Spacing ===== */
  --spacing-base: 8px;
  --spacing-xs: calc(var(--spacing-base) * 0.5); /* 4px */
  --spacing-sm: calc(var(--spacing-base) * 1); /* 8px */
  --spacing-md: calc(var(--spacing-base) * 2); /* 16px */
  --spacing-lg: calc(var(--spacing-base) * 3); /* 24px */
  --spacing-xl: calc(var(--spacing-base) * 4); /* 32px */
  --spacing-2xl: calc(var(--spacing-base) * 6); /* 48px */
  --spacing-3xl: calc(var(--spacing-base) * 8); /* 64px */
  
  /* ===== Typography ===== */
  --font-family-primary: "Inter", "Roboto", "Helvetica", "Arial", sans-serif;
  --font-family-persian: "Vazirmatn", "Inter", "Roboto", "Helvetica", "Arial", sans-serif;
  --font-family-system: system-ui, Avenir, Helvetica, Arial, sans-serif;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Font Sizes */
  --font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 1vw, 1rem);
  --font-size-base: clamp(1rem, 1.2vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.4vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 2vw, 1.75rem);
  --font-size-3xl: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-4xl: clamp(2rem, 4vw, 3.5rem);
  --font-size-5xl: clamp(2.5rem, 5vw, 4.5rem);
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.6;
  --line-height-extra-loose: 1.7;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: -0.01em;
  --letter-spacing-wide: 0.02em;
  
  /* ===== Border Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* ===== Transitions ===== */
  --transition-fast: 0.15s;
  --transition-base: 0.25s;
  --transition-slow: 0.3s;
  --transition-slower: 0.5s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-Index ===== */
  --z-index-base: 1;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  
  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 166, 147, 0.2);
  --shadow-lg: 0 6px 30px rgba(0, 166, 147, 0.3);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 12px 40px rgba(0, 166, 147, 0.2);
  
  /* ===== Blur ===== */
  --blur-sm: 10px;
  --blur-md: 15px;
  --blur-lg: 20px;
  --blur-xl: 30px;
  
  /* ===== Scrollbar ===== */
  --scrollbar-width: 10px;
  --scrollbar-height: 10px;
  --scrollbar-border-radius: 10px;
  --scrollbar-border: 2px solid rgba(0, 0, 0, 0.1);
}

/* ===== Dark Mode ===== */
[data-theme="dark"],
.dark-mode {
  /* Background Colors - Dark Mode */
  --color-background-default: #0a0a0a;
  --color-background-paper: #0a0a0a;
  --color-background-elevated: #141414;
  
  /* Text Colors - Dark Mode */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-disabled: rgba(255, 255, 255, 0.5);
  
  /* Glassmorphism Colors - Dark Mode */
  --color-glass-background: rgba(255, 255, 255, 0.05);
  --color-glass-background-hover: rgba(255, 255, 255, 0.08);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --color-glass-border-hover: rgba(0, 166, 147, 0.3);
  
  /* Shadow Colors - Dark Mode */
  --color-shadow-primary: rgba(0, 166, 147, 0.3);
  --color-shadow-primary-hover: rgba(0, 166, 147, 0.4);
  --color-shadow-glass: rgba(0, 0, 0, 0.2);
  --color-shadow-glass-hover: rgba(0, 166, 147, 0.3);
  
  /* Scrollbar Colors - Dark Mode */
  --color-scrollbar-track: rgba(255, 255, 255, 0.05);
  --color-scrollbar-thumb: linear-gradient(135deg, rgba(0, 166, 147, 0.6) 0%, rgba(72, 209, 204, 0.6) 100%);
  --color-scrollbar-thumb-hover: linear-gradient(135deg, rgba(0, 166, 147, 0.8) 0%, rgba(72, 209, 204, 0.8) 100%);
  
  /* Background Gradients - Dark Mode */
  --color-background-gradient-start: rgba(0, 166, 147, 0.15);
  --color-background-gradient-end: rgba(72, 209, 204, 0.15);
  
  /* Shadows - Dark Mode */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 166, 147, 0.3);
  --shadow-lg: 0 6px 30px rgba(0, 166, 147, 0.4);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 12px 40px rgba(0, 166, 147, 0.3);
  
  /* Scrollbar Border - Dark Mode */
  --scrollbar-border: 2px solid rgba(0, 0, 0, 0.2);
}
/* vazirmatn-arabic-400-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/vazirmatn-arabic-400-normal-DMZFCm7K.woff2) format('woff2'), url(/assets/vazirmatn-arabic-400-normal-C4W5XURk.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-400-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/vazirmatn-latin-ext-400-normal-BdGhO0lm.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-400-normal-DPxMaNjI.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vazirmatn-latin-400-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/vazirmatn-latin-400-normal-BT_DHTc7.woff2) format('woff2'), url(/assets/vazirmatn-latin-400-normal-GKyMcI03.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* vazirmatn-arabic-500-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/vazirmatn-arabic-500-normal-C_lbnnKa.woff2) format('woff2'), url(/assets/vazirmatn-arabic-500-normal-Dqq3-xo3.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-500-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/vazirmatn-latin-ext-500-normal-CgxvvVrG.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-500-normal-4XgegWYb.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vazirmatn-latin-500-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/vazirmatn-latin-500-normal-6zZzgpg4.woff2) format('woff2'), url(/assets/vazirmatn-latin-500-normal-Bg_BALlD.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* vazirmatn-arabic-700-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/vazirmatn-arabic-700-normal-Dge_DOjm.woff2) format('woff2'), url(/assets/vazirmatn-arabic-700-normal-B5nPuCFv.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-700-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/vazirmatn-latin-ext-700-normal-BfoXmNMx.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-700-normal-DMYLqBto.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vazirmatn-latin-700-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/vazirmatn-latin-700-normal-9BlbvDRV.woff2) format('woff2'), url(/assets/vazirmatn-latin-700-normal-DrB0PBU6.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Theme Toggle - Smooth Transitions */
/* This file handles theme transitions without using CSS filter invert */

/* Smooth transition for theme changes */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html * {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Prevent flash of unstyled content */
html[data-theme="dark"],
html.dark-mode {
  color-scheme: dark;
}

html[data-theme="light"],
html:not([data-theme]):not(.dark-mode) {
  color-scheme: light;
}
#root {
  max-width: none;
  width: 100vw;
  margin: 0;
  padding: 0;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em var(--color-primary-light, #48d1cc));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em var(--color-secondary, #48d1cc));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: var(--color-text-secondary, rgba(26, 26, 26, 0.7));
}