@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Quicksand:wght@500;700&display=swap');

:root {
    /* Typography */
    --font-heading: 'Quicksand', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Color Palette - Calm Tech */
    --primary: 208 48% 47%;
    /* #3E7CB1 (Ocean Blue) -> HSL approx 208, 48%, 47% */
    --primary-foreground: 0 0% 100%;

    --secondary: 172 43% 58%;
    /* #65C2B6 (Breathing Teal) -> HSL approx 172, 43%, 58% */
    --secondary-foreground: 206 39% 28%;

    --background: 180 29% 96%;
    /* #F0F8F8 (Soft Mist) -> HSL approx 180, 29%, 96% */
    --foreground: 206 39% 28%;
    /* #2C4B64 (Deep Slate) -> HSL approx 206, 39%, 28% */

    --card: 0 0% 100%;
    /* #FFFFFF */
    --card-foreground: 206 39% 28%;

    --muted: 208 23% 48%;
    /* #5F7D95 (Blue Grey) -> HSL approx 208, 23%, 48% */
    --muted-foreground: 208 23% 48%;

    --border: 208 23% 85%;
    /* Light version of Blue Grey for borders */
    --input: 208 23% 85%;
    --ring: 208 48% 47%;

    /* Animation Color from Extension (adapted to use secondary) */
    --ringB: rgba(101, 194, 182, 0.25);
    /* #65C2B6 at 0.25 opacity */

    --radius: 16px;
    /* Soft rounded corners */

    /* Custom Pausa tokens */
    --glow-primary: 208 48% 47%;
    --glow-secondary: 172 43% 58%;
    --shadow-glow: 0 0 60px rgba(62, 124, 177, 0.2);
    --shadow-glow-lg: 0 0 120px rgba(101, 194, 182, 0.25);

    /* Soft UI Shadows */
    --shadow-sm: 0 2px 8px rgba(62, 124, 177, 0.08);
    --shadow-md: 0 4px 20px rgba(62, 124, 177, 0.12);
    --shadow-lg: 0 8px 30px rgba(62, 124, 177, 0.15);
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-heading);
}

/* Pill buttons override */
.btn-pill {
    border-radius: 50px;
}

/* Animations */
.ring {
    width: 200px;
    /* Adjusted size for web */
    height: 200px;
    /* Adjusted size for web */
    border-radius: 999px;

    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(circle at 60% 70%, var(--ringB), rgba(255, 255, 255, 0) 55%);
    border: 2px solid rgba(255, 255, 255, .55);

    box-shadow:
        0 0 0 0 var(--ringB),
        0 18px 70px rgba(10, 20, 40, 0.15);

    animation: cgtp-breathe 8s ease-in-out infinite;

    /* Centering content */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.breathe-text {
    animation: breathe-text 8s ease-in-out infinite;
    font-family: var(--font-heading);
}

.float {
    animation: float 6s ease-in-out infinite;
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

@keyframes cgtp-breathe {
    0% {
        transform: scale(0.90);
        box-shadow: 0 0 0 0 var(--ringB), 0 18px 70px rgba(10, 20, 40, .15);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 18px var(--ringB), 0 18px 70px rgba(10, 20, 40, .15);
    }

    100% {
        transform: scale(0.90);
        box-shadow: 0 0 0 0 var(--ringB), 0 18px 70px rgba(10, 20, 40, .15);
    }
}

@keyframes breathe-text {

    0%,
    45% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    55%,
    100% {
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}