/**
 * Mamaspedia Design System Variables
 * 
 * Extracted from Figma Design System
 * Source: https://www.figma.com/design/DzI0ymT8oxLqNlfoRAMpVO/
 */

:root {
  /* ===========================================
   * COLORS - From Figma Variables
   * =========================================== */
  
  /* Brand Colors - Primary (Purple) */
  --color-primary: #6E4F95;           /* Graphic color/Purple/700 - Header, Footer */
  --color-primary-light: #7B68B8;     /* Lighter purple variant */
  --color-primary-dark: #5A3D7A;      /* Darker shade for hover */
  
  /* Brand Colors - Accent (Green) */
  --color-accent: #8FB56C;            /* Основные бренд-цвета/color-primary - CTA buttons */
  --color-accent-hover: #7EA35D;      /* Hover state */
  --color-accent-active: #6D9250;     /* Active/pressed state */
  
  /* Neutral Colors - From Figma "Нейтральные" */
  --color-white: #FFFFFF;             /* Белый */
  --color-black: #000000;
  --color-surface: #FFFFFF;           /* Нейтральные/color-surface */
  --color-text: #303030;              /* Нейтральные/color-text, Black 9 */
  --color-text-secondary: #4D4D4D;    /* Black 8 */
  --color-text-muted: #A6A6A6;        /* Нейтральные/color-text-muted, Черный 5 */
  --color-text-placeholder: #878787;  /* Черный 07 - Search placeholder */
  --color-disabled: #DBDBDB;          /* Нейтральные/color-disabled */
  
  /* Background colors */
  --color-background: #F6F6F6;        /* Main body background */
  --color-background-alt: #F6F6F6;    /* Search block background */
  --color-background-dark: #6E4F95;   /* Purple sections */
  
  /* Border colors */
  --color-border: #DBDBDB;
  --color-border-light: #F0F0F0;
  
  /* Status colors */
  --color-success: #8FB56C;
  --color-error: #E74C3C;
  --color-warning: #F39C12;
  --color-info: #3498DB;
  
  /* Calendar specific colors */
  --color-turquoise: #00ADCB;           /* Today highlight in calendar */
  --color-day-inactive: #F6F6F6;        /* Inactive/past days background */

  /* ===========================================
   * TYPOGRAPHY - From Figma Text Styles
   * =========================================== */
  
  /* Font families */
  --font-primary: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Cinzel', Georgia, serif;
  --font-accent: 'Freehand521 BT', 'Brush Script MT', cursive;
  
  /* Font sizes - From Figma Text Styles */
  --font-size-xs: 14px;               /* Text XS */
  --font-size-sm: 16px;               /* Text S */
  --font-size-base: 16px;             /* Text S */
  --font-size-md: 18px;               /* Text M */
  --font-size-lg: 22px;               /* Text L Bold */
  --font-size-xl: 24px;               /* Freehand accent */
  --font-size-h3: 26px;               /* H3 */
  --font-size-h2: 32px;               /* H2 */
  --font-size-h1: 38px;               /* H1 */
  
  /* Font weights */
  --font-weight-normal: 400;          /* Regular */
  --font-weight-medium: 500;          /* Medium */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line heights - From Figma */
  --line-height-xs: 16px;             /* Text XS */
  --line-height-sm: 20px;             /* Text S */
  --line-height-md: 24px;             /* Text M */
  --line-height-lg: 32px;             /* Text L, H2, H3, Freehand */
  --line-height-h1: 40px;             /* H1 */
  
  /* Composite Text Styles (for reference) */
  /* Text XS: 14px/16px Regular */
  /* Text S: 16px/20px Regular */
  /* Text S Bold: 16px/16px Medium */
  /* Text M: 18px/24px Regular */
  /* Text M Bold: 18px/24px Medium */
  /* Text L Bold: 22px/32px Medium */
  /* H3: 26px/32px Medium */
  /* H2: 32px/32px Medium */
  /* H1: 38px/40px Medium */

  /* ===========================================
   * SPACING
   * =========================================== */
  
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* ===========================================
   * LAYOUT
   * =========================================== */
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 992px;
  --container-xl: 1100px;
  --container-2xl: 1316px; /* Standard site width - expanded by 100px */
  
  /* Header */
  --header-height: 86px;
  --header-height-mobile: 64px;
  
  /* Sidebar */
  --sidebar-width: 280px;

  /* ===========================================
   * BORDERS & RADIUS
   * =========================================== */
  
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Border widths */
  --border-width: 1px;
  --border-width-2: 2px;

  /* ===========================================
   * SHADOWS
   * =========================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ===========================================
   * TRANSITIONS
   * =========================================== */
  
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===========================================
   * Z-INDEX
   * =========================================== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-mobile-nav: 1000;
  --z-mobile-menu: 1001;

  /* ===========================================
   * BREAKPOINTS (for reference in JS)
   * =========================================== */
  
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;
}

/* ===========================================
 * MEDIA QUERY MIXINS (via CSS custom properties)
 * Use @media (min-width: 768px) for tablet+
 * =========================================== */

/* Dark mode support (future) - uncomment when implementing
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1A1A1A;
    --color-text: #FFFFFF;
  }
}
*/