/* =========================================================
   Music FM V2 — Design Tokens
   Sharp / clean / 2026 UI language
========================================================= */

:root{
    /* Brand */
    --mf-primary:#147cff;
    --mf-primary-2:#59c7ff;
    --mf-primary-dark:#005bea;
    --mf-primary-soft:#eef5ff;
    --mf-primary-soft-2:#e6f0ff;

    /* Base */
    --mf-bg:#f6f8fb;
    --mf-bg-2:#eef3f9;
    --mf-surface:#ffffff;
    --mf-surface-2:#fbfdff;
    --mf-surface-3:#f8fbff;

    /* Text */
    --mf-text:#071225;
    --mf-text-2:#111827;
    --mf-muted:#526173;
    --mf-muted-2:#64748b;
    --mf-light:#ffffff;

    /* Lines */
    --mf-border:#dbe5f1;
    --mf-border-soft:#e8eef7;
    --mf-border-blue:#d8e6ff;

    /* States */
    --mf-success:#16a34a;
    --mf-warning:#f59e0b;
    --mf-danger:#dc2626;
    --mf-info:#0284c7;

    /* Radius — intentionally square */
    --radius-none:0;
    --radius-xs:2px;
    --radius-sm:3px;
    --radius-md:4px;
    --radius-lg:6px;
    --radius-xl:8px;
    --radius-pill:999px;

    /* Shadows — soft, not bubbly */
    --shadow-xs:0 1px 2px rgba(15,23,42,.06);
    --shadow-sm:0 8px 18px rgba(15,23,42,.07);
    --shadow-md:0 14px 34px rgba(15,23,42,.09);
    --shadow-lg:0 22px 62px rgba(15,23,42,.13);

    /* Spacing */
    --space-2:2px;
    --space-4:4px;
    --space-6:6px;
    --space-8:8px;
    --space-10:10px;
    --space-12:12px;
    --space-16:16px;
    --space-20:20px;
    --space-24:24px;
    --space-28:28px;
    --space-32:32px;
    --space-40:40px;
    --space-48:48px;
    --space-56:56px;
    --space-64:64px;
    --space-80:80px;

    /* Layout */
    --mf-container:1380px;
    --mf-container-wide:1500px;
    --mf-page-padding:24px;
    --mf-section-gap:32px;
    --mf-header-height:86px;

    /* Typography */
    --font-main:"Heebo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs:12px;
    --text-sm:13px;
    --text-md:15px;
    --text-body:16px;
    --text-lg:18px;
    --text-xl:22px;
    --text-2xl:28px;
    --text-3xl:36px;
    --text-display:52px;

    /* Motion */
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-soft:cubic-bezier(.2,.8,.2,1);
    --transition-fast:.18s ease;
    --transition-normal:.28s var(--ease-out);
    --transition-slow:.44s var(--ease-out);

    /* Z-index */
    --z-header:999999;
    --z-dropdown:999998;
    --z-overlay:999997;
    --z-modal:1000000;
}

@media(max-width:720px){
    :root{
        --mf-page-padding:16px;
        --mf-section-gap:24px;
        --mf-header-height:64px;
        --text-display:36px;
        --text-3xl:30px;
        --text-2xl:24px;
    }
}