/* I'm Studio - Global Design System */

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: optional;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: optional;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: optional;
}

/* Design Tokens */
:root {
    /* Neutral color palette: sandbeige, gray, white */
    --color-white: #ffffff;
    --color-black: #111111;
    --color-sand-50: #f3eee8;
    --color-sand-100: #e8dfd3;
    --color-sand-200: #dac8b5;
    --color-sand-300: #cdb89f;
    --color-sand-400: #bda38b;
    --color-gray-100: #ebebeb;
    --color-gray-200: #d5d5d5;
    --color-gray-300: #bcbcbc;
    --color-gray-400: #959595;
    --color-gray-500: #666666;
    --color-logo: #827e7a;
    --color-logo-ink: #575756;
    --color-logo-ink-hover: #404040;

    /* Brand colors */
    --color-primary: var(--color-sand-300);
    --color-primary-light: var(--color-sand-200);
    --color-primary-hover: var(--color-sand-400);
    --color-primary-glow: rgba(189, 165, 141, 0.24);

    --color-secondary: var(--color-gray-300);
    --color-secondary-light: var(--color-gray-200);
    --color-secondary-hover: var(--color-gray-400);
    --color-secondary-glow: rgba(149, 149, 149, 0.16);

    --color-accent: var(--color-sand-100);
    --color-accent-light: var(--color-sand-50);
    --color-accent-glow: rgba(218, 200, 182, 0.22);

    /* Surfaces */
    --color-bg: var(--color-sand-50);
    --color-bg-warm: var(--color-white);
    --color-bg-cream: #f5f1ee;
    --color-bg-alt: #e9e0d5;
    --color-surface: var(--color-white);
    --color-surface-soft: #f8f4f0;

    /* Text */
    --color-text: var(--color-black);
    --color-text-soft: #222222;
    --color-text-muted: #4d4d4d;
    --color-text-faint: rgba(17, 17, 17, 0.24);

    /* Borders */
    --color-border: #cec2b5;
    --color-border-light: #e2d8cc;
    --color-border-strong: #c0b2a3;

    /* Semantic (neutralized) */
    --color-success: #55514b;
    --color-danger: #4f4b45;
    --color-focus: rgba(189, 165, 141, 0.36);

    /* Overlay helpers */
    --overlay-black-10: rgba(0, 0, 0, 0.1);
    --overlay-black-28: rgba(0, 0, 0, 0.28);
    --overlay-black-35: rgba(0, 0, 0, 0.35);
    --overlay-black-45: rgba(0, 0, 0, 0.45);
    --overlay-soft: rgba(17, 17, 17, 0.08);
    --overlay-medium: rgba(17, 17, 17, 0.14);

    /* Liquid Glass Materials */
    --glass-bg: rgba(255, 255, 255, 0.84);
    --glass-bg-strong: rgba(255, 255, 255, 0.94);
    --glass-bg-subtle: rgba(255, 255, 255, 0.76);
    --glass-border: rgba(206, 194, 181, 0.72);
    --glass-border-vivid: rgba(206, 194, 181, 0.9);
    --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 238, 232, 0.9) 100%);
    --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --glass-blur-sm: 12px;
    --glass-blur-md: 20px;
    --glass-blur-lg: 40px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 28px 62px rgba(0, 0, 0, 0.14);
    --shadow-glass: 0 10px 30px rgba(0, 0, 0, 0.07), 0 2px 10px rgba(0, 0, 0, 0.04);
    --shadow-glass-hover: 0 18px 42px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-glow-primary: 0 12px 34px rgba(189, 165, 141, 0.28);
    --shadow-glow-secondary: 0 12px 30px rgba(149, 149, 149, 0.2);
    --shadow-card-base: 0 8px 20px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.07);
    --shadow-card-strong: 0 10px 22px rgba(0, 0, 0, 0.08);
    --shadow-banner: 0 18px 38px rgba(0, 0, 0, 0.12);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Spacing - 8px base scale with generous whitespace */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 6rem;
    --space-12: 8rem;

    /* Typography Scale */
    --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: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;
    --text-6xl: 4rem;

    /* Motion Tokens - premium feel */
    --motion-instant: 80ms;
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 400ms;
    --motion-slower: 600ms;
    --motion-glacial: 1200ms;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Background Gradients */
    --gradient-hero:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(189, 165, 141, 0.12), transparent),
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(149, 149, 149, 0.08), transparent),
        radial-gradient(ellipse 50% 50% at 60% 70%, rgba(218, 200, 182, 0.1), transparent),
        linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);

    --gradient-body:
        radial-gradient(ellipse 70% 40% at 10% 20%, rgba(189, 165, 141, 0.09), transparent),
        radial-gradient(ellipse 50% 60% at 90% 10%, rgba(149, 149, 149, 0.06), transparent),
        linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 50%, var(--color-bg-alt) 100%);

    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-banner: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    --gradient-surface: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
    --gradient-card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(243, 238, 232, 0.86) 100%);
    --gradient-final-cta: linear-gradient(135deg, rgba(189, 165, 141, 0.12) 0%, rgba(149, 149, 149, 0.08) 100%);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.6;
    background: var(--gradient-body);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; }

/* Container */
.container {
    width: min(1200px, 90vw);
    margin-inline: auto;
}

.container-narrow {
    width: min(900px, 90vw);
    margin-inline: auto;
}

/* Liquid Glass Surfaces */
.glass-surface {
    background: var(--glass-highlight);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass), var(--glass-inner-shadow);
    backdrop-filter: blur(var(--glass-blur-md));
    -webkit-backdrop-filter: blur(var(--glass-blur-md));
}

.glass-card {
    background: var(--gradient-card-surface);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition:
        transform var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
}

.glass-card:hover {
    box-shadow: var(--shadow-glass-hover);
}

/* Icons */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.icon-pill {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: var(--color-primary-glow);
    border: 1px solid var(--color-border-strong);
}

.icon-pill .icon {
    width: 1.4rem;
    height: 1.4rem;
}

/* Buttons - "gel" press effect */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion-base) var(--ease-standard),
        background var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard),
        color var(--motion-base) var(--ease-standard);
}

/* Subtle radial glow on press for "gel" feel */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35), transparent 70%);
    transition: opacity var(--motion-fast) var(--ease-standard);
    pointer-events: none;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0) scale(0.97);
}

.btn:active::after {
    opacity: 1;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus);
}

.btn-primary {
    color: var(--color-text);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-glow-primary);
}

.btn-primary:hover {
    box-shadow: var(--shadow-glow-primary);
}

.btn-secondary {
    color: var(--color-text);
    background: var(--gradient-secondary);
    box-shadow: var(--shadow-glow-secondary);
}

.btn-secondary:hover {
    box-shadow: var(--shadow-glow-secondary);
}

.btn-ghost {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

.btn-ghost:hover {
    border-color: var(--color-border-strong);
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow-md);
}

.btn-lg {
    padding: 0.9rem 2rem;
    font-size: var(--text-base);
}

/* Text Links */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary-hover);
    font-weight: 600;
    transition:
        color var(--motion-fast) var(--ease-standard),
        gap var(--motion-base) var(--ease-standard);
}

.text-link:hover {
    color: var(--color-primary);
    gap: 0.65rem;
}

/* Focus Styles */
.text-link:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus);
    border-radius: var(--radius-xs);
}

/* Alerts */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
}

.alert-success {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
}

.alert-error {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
}

/* Utility Classes */
.text-muted { color: var(--color-text-muted); }
.text-soft { color: var(--color-text-soft); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-4); }
.mt-4 { margin-top: var(--space-5); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Simple Theme Overrides (flat / clean, no glass look) */
body {
    background: var(--gradient-body);
    background-attachment: scroll;
}

.glass-surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card-base);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.glass-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card-base);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.glass-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.btn::after {
    display: none;
}

.btn {
    border-width: 1px;
}

.btn-primary,
.btn-secondary {
    box-shadow: var(--shadow-card-base);
}

.btn-primary:hover,
.btn-secondary:hover {
    box-shadow: var(--shadow-card-strong);
}

.btn-ghost {
    background: var(--color-surface-soft);
    border-color: var(--color-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.btn-ghost:hover {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-base);
}

.text-link:hover {
    gap: 0.5rem;
}