/* assets/css/variables.css */
:root {
    /* Brand gradient (replaces former black fills) */
    /* Slightly desaturated teal for calmer premium neutrality */
    --gradient-brand: linear-gradient(135deg, #112959, #1b6179, #2aa596);
    /* Solid primary: text on light backgrounds, borders, 1px rules (WCAG-friendly) */
    --clr-primary: #112959;
    --clr-secondary: #1b6179;
    /* Neutral palette (premium minimal) */
    --clr-accent: #e7e0cf; /* soft warm neutral */
    --clr-accent-brand: #2aa596;
    --clr-text-main: #334155;
    --clr-text-muted: #5b6776;
    --clr-text-light: #ffffff;
    --clr-bg-main: #ffffff;
    --clr-bg-alt: #fbf7f1; /* ivory/beige */
    --clr-bg-surface: #f7f0e6;
    /* Page canvas: barely warm — reduces harsh white/ivory jumps between sections */
    --clr-bg-canvas: #faf9f7;

    /* Section rhythm (fluid vertical spacing) */
    --section-pad-y: clamp(3.5rem, 5.5vw, 6.75rem);
    --section-pad-y-lg: clamp(4.25rem, 7vw, 7.5rem);
    /* Height of soft color blend at section edges — wider for smoother inter-section transitions */
    --section-blend-y: clamp(52px, 7vw, 90px);
    --clr-border: #eadfcb; /* warm border */

    /* Typography */
    --font-heading: 'Playfair Display', -apple-system, BlinkMacSystemFont, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing & Layout */
    --spacing-section: var(--section-pad-y-lg) 0;
    --container-max: 1280px;
    /* Matches .container horizontal padding — use for hero + any full-bleed rows that must align to the content column */
    --container-padding-x: clamp(1.25rem, 4vw, 2rem);
    --site-header-total: 7rem;
    --radius-sm: 4px;
    --radius-md: 8px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Micro-interactions — minimal, premium motion (cards, controls, imagery) */
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-card: 0.42s;
    --duration-ui: 0.3s;
    --duration-image: 0.7s;

    /* Elevation (subtle clinical luxury) */
    --shadow-sm: 0 10px 30px rgba(17, 41, 89, 0.12);
    --shadow-md: 0 24px 70px rgba(17, 41, 89, 0.16);
}