/*
 * Design Tokens — Olesya Gudkovskaya
 * Monochrome palette, soft contrast, liquid glass
 *
 * Fonts: Instrument Serif (display) + Source Sans 3 (body)
 */

:root {
    /* ═══════════════════════════════════════════════════════════
       COLORS — Monochrome, soft contrast
    ═══════════════════════════════════════════════════════════ */

    /* Ink — text colors (softer contrast) */
    --color-ink: #2d2d2d;
    --color-ink-soft: #5a5a5a;
    --color-ink-muted: #8a8a8a;
    --color-ink-faint: #b0b0b0;

    /* Surface — clean backgrounds */
    --color-surface: #fafafa;
    --color-surface-warm: #f5f5f5;
    --color-surface-cream: #f0f0f0;
    --color-surface-dark: #1f1f1f;

    /* Accent — Warm taupe/bronze, elegant & restrained */
    --color-accent: #9a8478;
    --color-accent-soft: #b8a89c;
    --color-accent-dark: #7d6a5e;
    --color-accent-muted: rgba(154, 132, 120, 0.12);
    --color-accent-light: #d4c8c0;

    /* Glass effect colors — more transparency */
    --color-glass: rgba(255, 255, 255, 0.55);
    --color-glass-strong: rgba(255, 255, 255, 0.72);
    --color-glass-border: rgba(255, 255, 255, 0.4);
    --color-glass-border-soft: rgba(255, 255, 255, 0.25);

    /* Utility */
    --color-border: rgba(0, 0, 0, 0.06);
    --color-border-soft: rgba(0, 0, 0, 0.03);
    --color-overlay: rgba(0, 0, 0, 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;

    /* ═══════════════════════════════════════════════════════════
       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: 1.25rem;

    /* ═══════════════════════════════════════════════════════════
       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 — more liquid feel */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-bg-hover: rgba(255, 255, 255, 0.6);
    --glass-bg-strong: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-blur: 20px;
    --glass-blur-strong: 32px;

    /* Shadows — softer */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.06);

    /* Glass shadow */
    --shadow-glass:
        0 4px 30px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* 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;
}