/* CSS Variables - Aliceo Brand v2 */
:root {
    /* Aliceo Brand Colors */
    --green: #00A664;
    --color-coral: #F67A74;
    --color-corsica-blue: #00D4FF; /* Reserved for future use */

    /* Ink (text) scale */
    --ink: #111714;
    --ink-secondary: #3d4a43;
    --ink-muted: #6b7d73;
    --ink-faint: #9aa89f;

    /* Backgrounds */
    --bg: #FFFFFF;
    --bg-warm: #FFFFFF;

    /* Typography */
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans: 'DM Sans', system-ui, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Fluid Type Scale (375px → 1440px) */
    --fs-display:        clamp(2.75rem, 1.1rem + 5.6vw, 6.5rem);
    --fs-display-accent: clamp(1.25rem, 0.775rem + 1.315vw, 2.125rem);
    --fs-heading-xl:     clamp(2.25rem, 1.031rem + 3.38vw, 4.5rem);
    --fs-heading-lg:     clamp(1.125rem, 0.838rem + 0.751vw, 1.625rem);
    --fs-subheading:     clamp(1.375rem, 1.159rem + 0.563vw, 1.75rem);
    --fs-subheading-sm:  clamp(0.875rem, 0.767rem + 0.282vw, 1.0625rem);
    --fs-body-lg:        clamp(1.0625rem, 0.955rem + 0.282vw, 1.25rem);
    --fs-body:           clamp(1rem, 0.966rem + 0.094vw, 1.0625rem);
    --fs-stat-value:     clamp(3.5rem, 1.143rem + 3.756vw, 6rem);
    --fs-step-num:       clamp(3rem, 2.568rem + 1.127vw, 3.75rem);
    --fs-cta-button:     clamp(1.0625rem, 0.955rem + 0.282vw, 1.25rem);
    --fs-caption:        clamp(0.75rem, 0.678rem + 0.188vw, 0.875rem);
    --fs-micro:          0.5625rem;
    --fs-video-cue:      1.375rem;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* Layout */
    --max-width: 1400px;

    /* Effects */
    --transition-fast: 200ms ease-out;
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --section-transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-sm: 0 2px 8px rgba(17, 23, 20, 0.06);
    --shadow-md: 0 4px 16px rgba(17, 23, 20, 0.08);
    --shadow-lg: 0 8px 24px rgba(17, 23, 20, 0.10);
    --shadow-xl: 0 16px 48px rgba(17, 23, 20, 0.14);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
}

h1, h2 {
    font-family: var(--font-serif);
    font-weight: 400;
}

h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 400;
}

p {
    font-size: var(--fs-body);
    line-height: 1.6;
}

a {
    color: var(--ink-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

a:hover {
    color: var(--green);
}

/* Focus Styles */
*:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--green);
    color: white;
}

/* Scroll-triggered reveals (used by non-hero sections) */
.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity var(--section-transition), transform var(--section-transition);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* Hero entrance animations (CSS-driven, not JS reveal) */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scrollPulse {
    0%   { top: -100%; }
    50%  { top: 0%; }
    100% { top: 100%; }
}