/* ============================================================
   MIA DESIGN SYSTEM — token bundle.
   Generated from the "Mia Design System" project (056e6643):
   fonts + colors + typography + spacing + radius + shadows +
   motion + base, concatenated for the no-build marketing site.
   The @import (webfonts) must stay first.
   ============================================================ */

/* ---- fonts ----
   Display: Fredoka (rounded, chunky — echoes the "mia" wordmark)
   Body:    Hanken Grotesk · Mono: Space Mono */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================
   COLOR SYSTEM — "studio after dark"
   ============================================================ */
:root {
    /* ---- Brand core ---- */
    --flare: #FF5A30; /* primary — CTAs, the "Mia" energy */
    --flare-deep: #E8431C; /* hover / press */
    --flare-soft: #FFE3D8; /* tinted surface */
    --flare-glow: #FF8A66; /* lighter accents, gradients */

    --volt: #D6FF3F; /* electric lime — highlights, "live" */
    --volt-deep: #B7E81F;
    --volt-soft: #F0FFC4;

    --cobalt: #2D5BFF; /* spark blue — links, AI moments */
    --cobalt-deep: #1E45D6;
    --cobalt-soft: #DDE5FF;

    --bubble: #FF7BAC; /* playful pink pop — sparingly */
    --bubble-soft: #FFE0EC;

    /* ---- Ink (warm near-blacks / aubergine) ---- */
    --ink: #16121C;
    --ink-2: #211A2B;
    --ink-3: #342A42;
    --ink-4: #5A4F6B;

    /* ---- Paper (warm creams / light surfaces) ---- */
    --paper: #FFF6EC;
    --paper-2: #FFEFE0;
    --paper-3: #FBE7D4;
    --white: #FFFFFF;

    /* ---- Neutral grays (warm-tinted) ---- */
    --gray-100: #F4ECE3;
    --gray-200: #E7DCCF;
    --gray-300: #D4C6B6;
    --gray-400: #B2A293;
    --gray-500: #8A7C6E;
    --gray-600: #5E5247;

    /* ---- Semantic ---- */
    --success: #18A957;
    --success-soft: #D4F4DF;
    --warning: #FFB020;
    --warning-soft: #FFEFCC;
    --danger: #E11D2A;
    --danger-soft: #FBD9DC;
    --info: var(--cobalt);
    --info-soft: var(--cobalt-soft);

    /* ---- semantic aliases ---- */
    --bg-app: var(--paper);
    --surface-card: var(--white);
    --surface-sunk: var(--paper-3);
    --surface-panel: var(--paper-2);
    --surface-ink: var(--ink);
    --surface-ink-2: var(--ink-2);

    --text-strong: var(--ink);
    --text-body: #2C2436;
    --text-muted: var(--gray-600);
    --text-faint: var(--gray-500);
    --text-on-ink: var(--paper);
    --text-on-ink-muted: #B6A8C4;
    --text-on-flare: #FFFFFF;
    --text-link: var(--cobalt);

    --border: var(--gray-200);
    --border-strong: var(--ink);
    --border-on-ink: var(--ink-3);

    --accent: var(--flare);
    --accent-press: var(--flare-deep);
    --accent-2: var(--volt);
    --accent-3: var(--cobalt);

    --focus-ring: var(--cobalt);

    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    --font-display: 'Fredoka', system-ui, sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra: 800;
    --fw-black: 900;

    --text-display-2xl: 5.25rem;
    --text-display-xl: 4rem;
    --text-display-lg: 3rem;
    --text-display-md: 2.25rem;
    --text-h1: 2rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-lg: 1.125rem;
    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;
    --text-2xs: 0.6875rem;

    --lh-tight: 0.95;
    --lh-snug: 1.1;
    --lh-heading: 1.2;
    --lh-body: 1.55;
    --lh-relaxed: 1.7;

    --tracking-display: -0.02em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.04em;
    --tracking-label: 0.14em;

    /* ============================================================
       SPACING (4px base grid)
       ============================================================ */
    --space-0: 0;
    --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-12: 6rem;
    --space-16: 8rem;

    --container-sm: 640px;
    --container-md: 860px;
    --container-lg: 1120px;
    --container-xl: 1320px;

    --gutter: var(--space-5);
    --gutter-lg: var(--space-8);

    /* ============================================================
       RADIUS
       ============================================================ */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;
    --radius-blob: 42% 58% 56% 44% / 52% 44% 56% 48%;

    /* ============================================================
       SHADOWS & ELEVATION
       ============================================================ */
    --shadow-xs: 0 1px 2px rgba(22, 18, 28, 0.06);
    --shadow-sm: 0 2px 6px rgba(22, 18, 28, 0.08);
    --shadow-md: 0 8px 20px rgba(22, 18, 28, 0.10);
    --shadow-lg: 0 18px 40px rgba(22, 18, 28, 0.14);
    --shadow-xl: 0 30px 70px rgba(22, 18, 28, 0.18);

    --glow-flare: 0 8px 24px rgba(255, 90, 48, 0.40);
    --glow-volt: 0 8px 24px rgba(183, 232, 31, 0.45);
    --glow-cobalt: 0 8px 24px rgba(45, 91, 255, 0.38);

    /* HARD sticker shadow — solid offset block, no blur. */
    --shadow-hard: 3px 3px 0 0 var(--ink);
    --shadow-hard-lg: 5px 5px 0 0 var(--ink);
    --shadow-hard-flare: 4px 4px 0 0 var(--flare);
    --shadow-hard-volt: 4px 4px 0 0 var(--volt-deep);

    --border-1: 1px;
    --border-2: 1.5px;
    --border-3: 2px;

    --shadow-inset: inset 0 2px 4px rgba(22, 18, 28, 0.10);

    /* ============================================================
       MOTION
       ============================================================ */
    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --dur-scene: 600ms;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
    --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

    --press-scale: 0.96;
    --hover-lift: -1px;
    --hover-pop: 1.03;
}

/* shared keyframes */
@keyframes mia-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes mia-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

@keyframes mia-scrub {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

@keyframes mia-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mia-blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

@keyframes mia-play-ping {
    0% {
        transform: scale(.9);
        opacity: .6;
    }
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    color: var(--text-body);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--text-strong);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--fw-bold);
}

p {
    margin: 0;
}

a {
    color: var(--text-link);
    text-decoration: none;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration: underline;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

::selection {
    background: var(--volt);
    color: var(--ink);
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

hr {
    border: none;
    border-top: var(--border-1) solid var(--border);
    margin: var(--space-5) 0;
}

/* convenience helpers */
.mia-display {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-tight);
}

.mia-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}