/**
 * Design Tokens — PapaGid 2026
 *
 * Система дизайн-токенов построена на двух уровнях:
 *
 * 1. PRIMITIVE TOKENS — сырые значения (цвета, размеры)
 *    Пример: --color-pink-400, --space-4, --radius-md
 *
 * 2. SEMANTIC TOKENS — смысловые значения (references to primitive)
 *    Пример: --color-brand-primary, --spacing-component-md, --radius-card
 *
 * Правило: Всегда используй SEMANTIC tokens в компонентах.
 * Primitive tokens — только для создания новых semantic tokens.
 *
 * Цветовая система: 60-30-10 rule
 * - 60% нейтральные warm backgrounds (neutral-50, neutral-100)
 * - 30% lavender/teal секции (lavender-50, teal-50)
 * - 10% pink акценты (pink-400 для CTA, иконок, highlights)
 *
 * Spacing: 4px base grid (все значения кратны 4)
 * Border radius: Soft & rounded (8px-20px для карточек, 9999px для pills)
 * Typography: Modular Scale 1.25 (Perfect Fourth)
 * Shadows: Теплые, мягкие (rgba(31, 27, 24, ...))
 *
 * @package Papagid
 * @since 2.0.0
 */

:root {
	/* ═══════════════════════════════════════════════════════════
	   PRIMITIVE TOKENS
	   ═══════════════════════════════════════════════════════════ */

	/* Colors — Scarlet (Brand Primary) — vivid palette */
	--color-pink-50: #FEF2F2;
	--color-pink-100: #FEE2E2;
	--color-pink-200: #FECACA;
	--color-pink-300: #F87171;
	--color-pink-400: #EF4444;
	--color-pink-500: #E63946;
	--color-pink-600: #C81E2B;

	/* Colors — Lavender (Secondary Brand) */
	--color-lavender-50: #F5F0FA;
	--color-lavender-100: #E8DAEF;
	--color-lavender-200: #C6B2D9;
	--color-lavender-300: #A888C0;
	--color-lavender-400: #8B68A8;

	/* Colors — Teal (Health/Calm) — vivid palette */
	--color-teal-50: #E6F7F5;
	--color-teal-100: #B3ECE4;
	--color-teal-200: #66D9C9;
	--color-teal-300: #33C9B4;
	--color-teal-400: #00A896;
	--color-teal-500: #008F7F;

	/* Colors — Neutral (Warm Gray) */
	--color-neutral-0: #FFFFFF;
	--color-neutral-50: #F9F7F4;
	--color-neutral-100: #F0EEE9;
	--color-neutral-200: #E2DDD7;
	--color-neutral-300: #C9C3BB;
	--color-neutral-400: #9D968D;
	--color-neutral-600: #6B6560;
	--color-neutral-800: #3A3530;
	--color-neutral-900: #1F1B18;

	/* Colors — Sand (Warm Sections) */
	--color-sand-100: #F5EDE3;
	--color-sand-200: #E8D5BE;

	/* ═══════════════════════════════════════════════════════════
	   SEMANTIC TOKENS — Colors
	   ═══════════════════════════════════════════════════════════ */

	/* Brand Colors */
	--color-brand-primary: var(--color-pink-400);
	--color-brand-primary-light: var(--color-pink-100);
	--color-brand-primary-dark: var(--color-pink-600);
	--color-brand-secondary: var(--color-lavender-200);
	--color-brand-accent: var(--color-teal-400);

	/* Background Colors */
	--color-bg-page: var(--color-neutral-50);
	--color-bg-surface: var(--color-neutral-0);
	--color-bg-subtle: var(--color-neutral-100);
	--color-bg-muted: var(--color-sand-100);
	--color-bg-pink: var(--color-pink-50);
	--color-bg-lavender: var(--color-lavender-50);
	--color-bg-teal: var(--color-teal-50);

	/* Text Colors */
	--color-text-primary: var(--color-neutral-900);
	--color-text-secondary: var(--color-neutral-600);
	--color-text-muted: var(--color-neutral-400);
	--color-text-inverse: var(--color-neutral-0);
	--color-text-brand: var(--color-pink-500);

	/* Border Colors */
	--color-border-default: var(--color-neutral-200);
	--color-border-subtle: var(--color-neutral-100);
	--color-border-brand: var(--color-pink-200);

	/* Interactive Colors */
	--color-interactive-primary: var(--color-pink-400);
	--color-interactive-primary-hover: var(--color-pink-500);
	--color-interactive-primary-active: var(--color-pink-600);
	--color-interactive-secondary: var(--color-teal-400);

	/* Health Semantic Colors */
	--color-health-positive: var(--color-teal-500);
	--color-health-warning: #C9803A;
	--color-health-alert: var(--color-pink-500);
	--color-health-info: #3B7AC9;

	/* ═══════════════════════════════════════════════════════════
	   SEMANTIC TOKENS — Typography
	   ═══════════════════════════════════════════════════════════ */

	/* Font Families */
	--font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-family-display: 'Playfair Display', Georgia, serif;
	--font-family-mono: 'JetBrains Mono', 'Courier New', monospace;

	/* Font Sizes (Modular Scale 1.25 — Perfect Fourth) */
	--font-size-xs: 0.64rem;      /* 10.24px */
	--font-size-sm: 0.8rem;       /* 12.8px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-md: 1.125rem;     /* 18px */
	--font-size-lg: 1.25rem;      /* 20px */
	--font-size-xl: 1.5rem;       /* 24px */
	--font-size-2xl: 1.875rem;    /* 30px */
	--font-size-3xl: 2.25rem;     /* 36px */
	--font-size-4xl: 3rem;        /* 48px */
	--font-size-5xl: 3.75rem;     /* 60px */

	/* Line Heights */
	--line-height-tight: 1.2;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;

	/* Font Weights */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Letter Spacing */
	--letter-spacing-tight: -0.025em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.025em;
	--letter-spacing-caps: 0.1em;

	/* ═══════════════════════════════════════════════════════════
	   SEMANTIC TOKENS — Spacing (4px grid)
	   ═══════════════════════════════════════════════════════════ */

	--space-0: 0;
	--space-1: 0.25rem;    /* 4px */
	--space-2: 0.5rem;     /* 8px */
	--space-3: 0.75rem;    /* 12px */
	--space-4: 1rem;       /* 16px */
	--space-5: 1.25rem;    /* 20px */
	--space-6: 1.5rem;     /* 24px */
	--space-8: 2rem;       /* 32px */
	--space-10: 2.5rem;    /* 40px */
	--space-12: 3rem;      /* 48px */
	--space-16: 4rem;      /* 64px */
	--space-20: 5rem;      /* 80px */
	--space-24: 6rem;      /* 96px */

	/* Semantic Spacing */
	--spacing-component-sm: var(--space-3);
	--spacing-component-md: var(--space-4);
	--spacing-component-lg: var(--space-6);
	--spacing-section-sm: var(--space-12);
	--spacing-section-md: var(--space-16);
	--spacing-section-lg: var(--space-20);

	/* ═══════════════════════════════════════════════════════════
	   SEMANTIC TOKENS — Border Radius
	   ═══════════════════════════════════════════════════════════ */

	--radius-sm: 0.25rem;   /* 4px */
	--radius-md: 0.5rem;    /* 8px */
	--radius-lg: 0.75rem;   /* 12px */
	--radius-xl: 1rem;      /* 16px */
	--radius-2xl: 1.25rem;  /* 20px */
	--radius-full: 9999px;

	/* Semantic Border Radius */
	--radius-button: var(--radius-full);
	--radius-card: var(--radius-xl);
	--radius-input: var(--radius-md);
	--radius-badge: var(--radius-full);

	/* ═══════════════════════════════════════════════════════════
	   SEMANTIC TOKENS — Shadows
	   ═══════════════════════════════════════════════════════════ */

	--shadow-xs: 0 1px 2px rgba(31, 27, 24, 0.04);
	--shadow-sm: 0 1px 3px rgba(31, 27, 24, 0.06);
	--shadow-md: 0 4px 6px rgba(31, 27, 24, 0.07);
	--shadow-lg: 0 10px 15px rgba(31, 27, 24, 0.08);
	--shadow-xl: 0 20px 25px rgba(31, 27, 24, 0.08);
	--shadow-pink: 0 4px 14px rgba(229, 123, 138, 0.30);
	--shadow-teal: 0 4px 14px rgba(77, 158, 145, 0.25);

	/* Semantic Shadows */
	--shadow-card: var(--shadow-md);
	--shadow-card-hover: var(--shadow-lg);
	--shadow-button: var(--shadow-pink);

	/* ═══════════════════════════════════════════════════════════
	   SEMANTIC TOKENS — Gradients
	   ═══════════════════════════════════════════════════════════ */

	/* Brand Gradients */
	--gradient-primary: linear-gradient(135deg, var(--color-pink-400) 0%, var(--color-pink-500) 100%);
	--gradient-secondary: linear-gradient(135deg, var(--color-lavender-200) 0%, var(--color-lavender-300) 100%);
	--gradient-accent: linear-gradient(135deg, var(--color-teal-400) 0%, var(--color-teal-500) 100%);

	/* Warm Background Gradients */
	--gradient-warm-light: linear-gradient(180deg, var(--color-neutral-50) 0%, var(--color-sand-100) 100%);
	--gradient-warm-subtle: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-pink-50) 100%);

	/* Trimester Gradients */
	--gradient-trimester-1: linear-gradient(135deg, var(--color-pink-400) 0%, var(--color-pink-500) 100%);
	--gradient-trimester-2: linear-gradient(135deg, var(--color-teal-400) 0%, var(--color-teal-500) 100%);
	--gradient-trimester-3: linear-gradient(135deg, var(--color-lavender-300) 0%, var(--color-lavender-400) 100%);

	/* Overlay Gradients */
	--gradient-overlay-dark: linear-gradient(180deg, rgba(31, 27, 24, 0) 0%, rgba(31, 27, 24, 0.7) 100%);
	--gradient-overlay-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);

	/* Shimmer Effect */
	--gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}