/**
 * Landing Page Theme
 * EXACT 1:1 migration from React theme
 * Source: src/theme/index.ts, src/util/styleConstants.ts, src/util/devices.ts
 */

:root {
    /* Theme Colors - Exact from React */
    --color-primary: #191C3D;
    --color-primary-light: #435868;
    --color-primary-50: #DEF2F9;
    --color-primary-400: #00B1C9;
    --color-primary-400-light: #78C4E2;
    --color-secondary: #00B1C9;
    --color-accent: #00B1C9;
    --color-success: #1FD47D;
    --color-error: #ED6A5A;
    --color-warning: #E7B537;
    --color-screen: #F0F0F0;
    --color-screen-shadow: #EFEFEF;
    --color-folder-hover: #fafafa;
    --color-background: #F3F4F5;
    --color-disabled-overlay: rgba(0, 0, 0, 0.75);
    --color-gray-text: rgba(0, 0, 0, 0.65);
    --color-disabled: #979797;
    --color-white: #FFF;
    --color-off-white-transparent: rgba(255, 232, 174, 0.1);
    --color-off-white-solid: #FFFDF6;
    --color-off-white-shadow: #EDE6DE;
    --color-blue-100: #181C3F;
    --color-blue-80: #5D6079;
    --color-blue-60: #74778C;
    --color-blue-20: #D1D2D9;
    --color-blue-10: #E8E8EC;
    --color-blue-5: #F3F3F5;
    --color-off-white: #F6F3EF;
    --color-divider: rgba(33, 33, 33, 0.08);
    --color-text: #000;
    --color-border: #F9F9F9;
    --color-web-background: #F5F3EE;

    /* Gradients - Exact from styleConstants */
    --gradient-hero: linear-gradient(#F6F3EF 70%, #F6F3EF);
    --gradient-white-to-off-white: linear-gradient(#FFF 90%, #FFFDF6);
    --gradient-off-white-to-white: linear-gradient(180deg, #FFFDF6 60%, #FFF);

    /* Shadows - Exact from theme */
    --box-shadow-1: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1);
    --box-shadow-2: rgb(0 0 0 / 2%) 0px 1px 12px 0px, rgb(0 0 0 / 5%) 0px 0px 20px;
    --shadow-default: 1px 1px 5px #EFEFEF;
    --shadow-default-dark: 1px 1px 5px rgba(239, 239, 239, 0.5);
    --shadow-reviews: 0px 0px 12px 0px rgba(0, 0, 0, 0.06);
    --shadow-header: 0px 2px 3px 1px rgba(237, 230, 222, 0.5);
    --shadow-section: 0px 2px 1px rgba(0, 0, 0, 0.15);
    --shadow-light: 0px 2px 1px rgba(0, 0, 0, 0.05);
    --shadow-spread: 10px 10px 50px rgba(0, 0, 0, 0.05);

    /* Border Radius - Exact from theme */
    --roundness: 10px;

    /* Font Sizes - Exact from theme */
    --font-size-header-large: 24px;
    --font-size-header: 20px;
    --font-size-body: 16px;
    --font-size-subtitle: 18px;
    --font-size-label: 14px;
    --font-size-folder-label: 14px;
    --font-size-onboarding: 32px;
    --font-size-digit-large: 50px;

    /* Letter Spacing */
    --letter-spacing: 0.15px;

    /* Breakpoints - Exact from devices.ts */
    --breakpoint-mobile-sm: 320px;
    --breakpoint-mobile-med: 375px;
    --breakpoint-mobile-lg: 425px;
    --breakpoint-tablet-sm: 600px;
    --breakpoint-tablet: 768px;
    --breakpoint-laptop: 1024px;
    --breakpoint-laptop-lg: 1440px;
    --breakpoint-desktop: 2560px;

    /* Z-Index */
    --z-base: 50;
    --z-sticky: 100;
    --z-dropdown: 1000;
}

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

html {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Typography - Exact from Text component */
h1.hero {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 3.2rem;
    line-height: 1.1;
    margin: 0;
}

h3.hero {
    color: var(--color-blue-100);
    line-height: 1.5;
    font-weight: 400;
    font-size: 1.5rem;
}

.hero-title {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 3.2rem;
    line-height: 1.1;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .hero-title {
        text-align: left;
    }
}

.hero-description {
    color: var(--color-blue-100);
    line-height: 1.5;
    font-weight: 400;
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
}

@media (min-width: 768px) {
    .hero-description {
        text-align: left;
    }
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    margin: 0;
}

p {
    line-height: 1.5;
    margin: 0;
}

a {
    color: var(--color-primary-400);
    text-decoration: none;
    transition: color 150ms ease;
}

a:hover {
    color: var(--color-primary-400-light);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-container {
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    z-index: var(--z-base);
}

.section-wrapper {
    background-color: var(--color-white);
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-content-wrapper {
    width: 90%;
    max-width: 900px;
}

@media (min-width: 768px) {
    .section-content-wrapper {
        max-width: 900px;
    }
}

/* Buttons */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 300ms ease;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary CTA Button - Exact from PrimaryCTA.tsx */
.primary-cta {
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--roundness);
    border: none;
    background-color: var(--color-primary);
    cursor: pointer;
    text-align: center;
    width: 100%;
    padding: 16px 16px;
    font-weight: bold;
    font-size: 1.2rem;
}

.primary-cta:hover {
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-secondary);
}

.primary-cta.small {
    width: initial;
    padding: initial;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1.hero {
        font-size: 2.4rem;
    }

    h3.hero {
        font-size: 1.2rem;
    }
}

/* Animations - Exact from style.css */
@keyframes scroll {
    0% {
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

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

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 300ms ease;
}

.slide-up {
    animation: slideUp 300ms ease;
}

/* Scroll Down Indicator */
.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
}

.scroll-downs {
    position: absolute;
    bottom: 0;
    width: 34px;
    height: 55px;
}

.mousey {
    width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}