/*
 * Design Tokens — Olesya Gudkovskaya
 * Mediterranean Warmth — deep burnt sienna accent, warm umber inks,
 * terracotta-tinted surfaces, warm glass, brown-tinted shadows.
 *
 * Fonts: Instrument Serif (display) + Source Sans 3 (body)
 */

:root {
    /* ═══════════════════════════════════════════════════════════
       COLORS — Mediterranean Warmth
    ═══════════════════════════════════════════════════════════ */

    /* Ink — deep warm umber */
    --color-ink: #1E1206;
    --color-ink-soft: #442E1C;
    --color-ink-muted: #7A5A42;
    --color-ink-faint: #A48C74;

    /* Surface — warm sand progression (hue 31-34°, no yellow/green) */
    --color-surface: #F7F0E7;
    --color-surface-warm: #F0D7BC;
    --color-surface-cream: #DFCCB4;
    --color-surface-dark: #1A0E06;

    /* Accent — Deep burnt sienna */
    --color-accent: #B85C2A;
    --color-accent-soft: #CC7E4E;
    --color-accent-dark: #944418;
    --color-accent-muted: rgba(184, 92, 42, 0.14);
    --color-accent-light: #E0AA82;

    /* Glass effect colors — warm sand-tinted (hue ~34°, no yellow/green) */
    --color-glass: rgba(250, 238, 222, 0.55);
    --color-glass-strong: rgba(250, 238, 222, 0.72);
    --color-glass-border: rgba(252, 238, 220, 0.40);
    --color-glass-border-soft: rgba(252, 238, 220, 0.25);

    /* Utility */
    --color-border: rgba(184, 92, 42, 0.10);
    --color-border-soft: rgba(184, 92, 42, 0.05);
    --color-overlay: rgba(26, 14, 6, 0.4);

    /* ═══════════════════════════════════════════════════════════
       TYPOGRAPHY
    ═══════════════════════════════════════════════════════════ */

    /* Font families */
    --font-display: 'Instrument Serif', 'Georgia', serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font sizes — bigger contrast between display and body */
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.625rem;

    /* Display sizes — MUCH larger for Instrument Serif impact */
    --text-2xl: clamp(2rem, 1.875rem + 1.5vw, 2.75rem);
    --text-3xl: clamp(2.5rem, 2.25rem + 2.5vw, 3.75rem);
    --text-4xl: clamp(3.25rem, 2.75rem + 3vw, 5rem);
    --text-5xl: clamp(3.75rem, 3.25rem + 4.5vw, 6.5rem);

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.04em;

    /* Font weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* Micro text — for badges, status tags, small labels */
    --text-2xs: 0.6875rem; /* 11px - smallest readable */

    /* ═══════════════════════════════════════════════════════════
       SPACING
    ═══════════════════════════════════════════════════════════ */

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Section spacing */
    --section-gap: clamp(4rem, 8vw, 8rem);
    --section-padding: clamp(2.5rem, 5vw, 5rem);

    /* ═══════════════════════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════════════════════ */

    --container-max: 1200px;
    --container-text: 720px;
    --container-narrow: 560px;
    --container-padding: clamp(1.25rem, 4vw, 3rem);

    /* Grid */
    --grid-gap: clamp(1rem, 2vw, 2rem);
    --card-gap: clamp(1rem, 2vw, 1.25rem);

    /* Card tokens — consistent glass card styling */
    --card-padding: var(--space-xl);
    --card-padding-mobile: var(--space-lg);
    --card-hover-lift: -3px;

    /* ═══════════════════════════════════════════════════════════
       BORDERS & RADIUS — Smaller, more refined
    ═══════════════════════════════════════════════════════════ */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Borders */
    --border-thin: 1px solid var(--color-border);

    /* ═══════════════════════════════════════════════════════════
       EFFECTS — Liquid glass, more transparency
    ═══════════════════════════════════════════════════════════ */

    /* Glass morphism — warm sand-tinted (hue ~34°) */
    --glass-bg: rgba(250, 238, 222, 0.48);
    --glass-bg-hover: rgba(250, 238, 222, 0.62);
    --glass-bg-strong: rgba(250, 238, 222, 0.75);
    --glass-border: rgba(252, 238, 220, 0.35);
    --glass-blur: 20px;
    --glass-blur-strong: 32px;

    /* Shadows — warm brown-tinted */
    --shadow-xs: 0 1px 3px rgba(90, 44, 16, 0.04);
    --shadow-sm: 0 2px 10px rgba(90, 44, 16, 0.05);
    --shadow-md: 0 6px 20px rgba(90, 44, 16, 0.07);
    --shadow-lg: 0 12px 40px rgba(90, 44, 16, 0.08);
    --shadow-xl: 0 24px 60px rgba(90, 44, 16, 0.10);

    /* Glass shadow */
    --shadow-glass:
        0 4px 30px rgba(90, 44, 16, 0.06),
        inset 0 1px 0 rgba(252, 238, 220, 0.6);

    /* ═══════════════════════════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════════════════════════ */

    --btn-primary-bg: rgba(30, 18, 6, 0.93);
    --btn-primary-bg-hover: rgba(48, 32, 16, 0.96);
    --btn-primary-border: rgba(30, 18, 6, 0.93);
    --btn-secondary-bg: rgba(250, 238, 222, 0.45);
    --btn-secondary-bg-hover: rgba(250, 238, 222, 0.72);
    --btn-secondary-border: rgba(184, 92, 42, 0.16);
    --btn-secondary-border-hover: rgba(184, 92, 42, 0.36);

    /* ═══════════════════════════════════════════════════════════
       ENVIRONMENT
    ═══════════════════════════════════════════════════════════ */

    --nav-backdrop-bg: rgba(248, 238, 224, 0.90);

    /* Photo tint (background photos only, NOT hero faces) */
    --photo-tint: sepia(0.18) saturate(1.12) brightness(0.99);
    --photo-tint-bw: sepia(0.32) saturate(0.50) brightness(0.94) contrast(1.06);
    --photo-tint-bw-hover: sepia(0.12) saturate(1.12) brightness(1.02);

    /* Transitions — slower, softer */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);

    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 600ms;
    --duration-slower: 900ms;

    --transition-fast: var(--duration-fast) var(--ease-smooth);
    --transition-normal: var(--duration-normal) var(--ease-gentle);
    --transition-slow: var(--duration-slow) var(--ease-out);

    /* ═══════════════════════════════════════════════════════════
       Z-INDEX
    ═══════════════════════════════════════════════════════════ */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
}