/**
 * ============================================================
 * SUNOSUNAO — CORE DESIGN SYSTEM
 * Design Version: 2.0
 * File: public_html/assets/css/core.css
 * ============================================================
 *
 * PURPOSE
 * -------
 * Core visual DNA for the new SunoSunao experience.
 *
 * This file controls:
 * - Color system
 * - Typography
 * - Spacing
 * - Sizing
 * - Radii
 * - Shadows
 * - Motion
 * - Z-index
 * - Reset
 * - Accessibility foundation
 * - Global utilities
 *
 * This file does NOT contain:
 * - Page-specific layout
 * - Story-specific content
 * - Backend logic
 * - Component-specific UI
 * - Legacy SunoSunao styling
 *
 * ============================================================
 */


/* ============================================================
   01. ROOT DESIGN TOKENS
   ============================================================ */

:root {

    /* --------------------------------------------------------
       COLOR — BACKGROUND
       -------------------------------------------------------- */

    --color-black:
        #000000;

    --color-background:
        #070707;

    --color-background-soft:
        #0b0b0b;

    --color-surface:
        #101010;

    --color-surface-soft:
        #141414;

    --color-surface-raised:
        #181818;


    /* --------------------------------------------------------
       COLOR — BRAND
       -------------------------------------------------------- */

    --color-accent:
        #ff202b;

    --color-accent-bright:
        #ff303a;

    --color-accent-deep:
        #d91620;

    --color-accent-soft:
        rgba(255, 32, 43, 0.12);

    --color-accent-glow:
        rgba(255, 32, 43, 0.18);

    --color-gold:
        #ffc857;

    --color-gold-soft:
        rgba(255, 200, 87, 0.11);


    /* --------------------------------------------------------
       COLOR — TEXT
       -------------------------------------------------------- */

    --color-text:
        rgba(255, 255, 255, 0.96);

    --color-text-soft:
        rgba(255, 255, 255, 0.78);

    --color-text-muted:
        rgba(255, 255, 255, 0.58);

    --color-text-faint:
        rgba(255, 255, 255, 0.38);

    --color-text-disabled:
        rgba(255, 255, 255, 0.22);


    /* --------------------------------------------------------
       COLOR — BORDERS
       -------------------------------------------------------- */

    --color-border-subtle:
        rgba(255, 255, 255, 0.055);

    --color-border:
        rgba(255, 255, 255, 0.09);

    --color-border-strong:
        rgba(255, 255, 255, 0.16);


    /* --------------------------------------------------------
       COLOR — OVERLAYS
       -------------------------------------------------------- */

    --overlay-light:
        rgba(255, 255, 255, 0.035);

    --overlay-medium:
        rgba(255, 255, 255, 0.065);

    --overlay-strong:
        rgba(255, 255, 255, 0.10);

    --overlay-black-soft:
        rgba(0, 0, 0, 0.35);

    --overlay-black:
        rgba(0, 0, 0, 0.60);

    --overlay-black-heavy:
        rgba(0, 0, 0, 0.82);


    /* ========================================================
       02. TYPOGRAPHY
       ======================================================== */

    --font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;


    /* --------------------------------------------------------
       FONT SIZES
       -------------------------------------------------------- */

    --text-xs:
        0.68rem;

    --text-sm:
        0.78rem;

    --text-base:
        1rem;

    --text-md:
        1.08rem;

    --text-lg:
        1.3rem;

    --text-xl:
        1.65rem;

    --text-2xl:
        2.1rem;

    --text-3xl:
        2.8rem;

    --text-4xl:
        3.6rem;

    --text-hero:
        clamp(3rem, 8vw, 7rem);


    /* --------------------------------------------------------
       FONT WEIGHTS
       -------------------------------------------------------- */

    --weight-regular:
        400;

    --weight-medium:
        500;

    --weight-semibold:
        600;

    --weight-bold:
        700;

    --weight-extrabold:
        800;


    /* --------------------------------------------------------
       LINE HEIGHTS
       -------------------------------------------------------- */

    --leading-tight:
        1.1;

    --leading-heading:
        1.2;

    --leading-normal:
        1.5;

    --leading-relaxed:
        1.7;

    --leading-loose:
        1.85;


    /* ========================================================
       03. SPACING SYSTEM
       ======================================================== */

    --space-1:
        0.25rem;

    --space-2:
        0.5rem;

    --space-3:
        0.75rem;

    --space-4:
        1rem;

    --space-5:
        1.25rem;

    --space-6:
        1.5rem;

    --space-8:
        2rem;

    --space-10:
        2.5rem;

    --space-12:
        3rem;

    --space-16:
        4rem;

    --space-20:
        5rem;

    --space-24:
        6rem;

    --space-32:
        8rem;


    /* ========================================================
       04. LAYOUT FOUNDATION
       ======================================================== */

    --content-max:
        1440px;

    --content-wide:
        1600px;

    --content-narrow:
        900px;

    --page-padding:
        clamp(1rem, 4vw, 4rem);

    --section-padding:
        clamp(4rem, 9vw, 9rem);

    --header-height:
        4.75rem;


    /* ========================================================
       05. BORDER RADIUS
       ======================================================== */

    --radius-xs:
        0.35rem;

    --radius-sm:
        0.55rem;

    --radius-md:
        0.8rem;

    --radius-lg:
        1.15rem;

    --radius-xl:
        1.5rem;

    --radius-2xl:
        2rem;

    --radius-full:
        999px;


    /* ========================================================
       06. SHADOW SYSTEM
       ======================================================== */

    --shadow-xs:
        0 0.35rem 1rem rgba(0, 0, 0, 0.16);

    --shadow-sm:
        0 0.7rem 2rem rgba(0, 0, 0, 0.20);

    --shadow-md:
        0 1.25rem 3rem rgba(0, 0, 0, 0.28);

    --shadow-lg:
        0 2rem 5rem rgba(0, 0, 0, 0.40);

    --shadow-xl:
        0 3rem 7rem rgba(0, 0, 0, 0.52);

    --shadow-accent:
        0 1rem 3rem rgba(255, 32, 43, 0.14);


    /* ========================================================
       07. MOTION SYSTEM
       ======================================================== */

    --ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-smooth:
        cubic-bezier(0.16, 1, 0.3, 1);

    --ease-linear:
        linear;

    --motion-fast:
        160ms;

    --motion-normal:
        300ms;

    --motion-slow:
        600ms;

    --motion-cinematic:
        900ms;

    --motion-scene:
        1400ms;


    /* ========================================================
       08. Z-INDEX SYSTEM
       ======================================================== */

    --z-base:
        1;

    --z-content:
        10;

    --z-header:
        100;

    --z-sticky:
        200;

    --z-dropdown:
        400;

    --z-overlay:
        700;

    --z-modal:
        900;

    --z-toast:
        1000;

    --z-max:
        9999;
}


/* ============================================================
   09. GLOBAL RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing:
        border-box;
}

html {
    min-height:
        100%;

    scroll-behavior:
        smooth;

    background:
        var(--color-black);
}

body {
    min-height:
        100vh;

    margin:
        0;

    color:
        var(--color-text);

    background:
        var(--color-background);

    font-family:
        var(--font-sans);

    font-size:
        var(--text-base);

    font-weight:
        var(--weight-regular);

    line-height:
        var(--leading-normal);

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}

img,
picture,
video,
canvas,
svg {
    display:
        block;

    max-width:
        100%;
}

img {
    height:
        auto;
}

button,
input,
textarea,
select {
    font:
        inherit;
}

button {
    border:
        0;

    margin:
        0;

    padding:
        0;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:
        0;
}

ul,
ol {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


/* ============================================================
   10. TYPOGRAPHY FOUNDATION
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-weight:
        var(--weight-semibold);

    line-height:
        var(--leading-heading);

    letter-spacing:
        -0.025em;
}

h1 {
    font-size:
        clamp(2.5rem, 6vw, 5.5rem);
}

h2 {
    font-size:
        clamp(2rem, 4vw, 3.5rem);
}

h3 {
    font-size:
        clamp(1.4rem, 2.5vw, 2rem);
}

h4 {
    font-size:
        1.25rem;
}

p {
    color:
        var(--color-text-soft);

    line-height:
        var(--leading-relaxed);
}

small {
    font-size:
        var(--text-sm);
}

strong {
    color:
        var(--color-text);

    font-weight:
        var(--weight-semibold);
}


/* ============================================================
   11. GLOBAL TEXT UTILITIES
   ============================================================ */

.text-primary {
    color:
        var(--color-text);
}

.text-secondary {
    color:
        var(--color-text-soft);
}

.text-muted {
    color:
        var(--color-text-muted);
}

.text-faint {
    color:
        var(--color-text-faint);
}

.text-accent {
    color:
        var(--color-accent);
}

.text-gold {
    color:
        var(--color-gold);
}

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

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

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


/* ============================================================
   12. GLOBAL CONTAINER
   ============================================================ */

.container {
    width:
        min(
            calc(100% - (var(--page-padding) * 2)),
            var(--content-max)
        );

    margin-inline:
        auto;
}

.container--wide {
    width:
        min(
            calc(100% - (var(--page-padding) * 2)),
            var(--content-wide)
        );

    margin-inline:
        auto;
}

.container--narrow {
    width:
        min(
            calc(100% - (var(--page-padding) * 2)),
            var(--content-narrow)
        );

    margin-inline:
        auto;
}


/* ============================================================
   13. SELECTION
   ============================================================ */

::selection {
    color:
        #fff;

    background:
        var(--color-accent);
}

::-moz-selection {
    color:
        #fff;

    background:
        var(--color-accent);
}


/* ============================================================
   14. SCROLLBAR
   ============================================================ */

html {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.18)
        transparent;
}

::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}

::-webkit-scrollbar-track {
    background:
        transparent;
}

::-webkit-scrollbar-thumb {
    background:
        rgba(255, 255, 255, 0.16);

    border-radius:
        var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 255, 255, 0.25);
}


/* ============================================================
   15. FOCUS SYSTEM
   ============================================================ */

:focus {
    outline:
        none;
}

:focus-visible {
    outline:
        2px solid var(--color-accent);

    outline-offset:
        4px;
}


/* ============================================================
   16. GLOBAL BUTTON FOUNDATION
   ============================================================ */

button,
[role="button"] {
    -webkit-tap-highlight-color:
        transparent;
}

button:disabled,
[aria-disabled="true"] {
    cursor:
        not-allowed;

    opacity:
        0.45;
}


/* ============================================================
   17. CINEMATIC GRADIENTS
   ============================================================ */

.cinematic-overlay {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.30) 45%,
            rgba(0, 0, 0, 0.88)
        );
}

.cinematic-overlay--left {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.20) 65%,
            transparent
        );
}

.cinematic-overlay--radial {
    background:
        radial-gradient(
            circle at center,
            transparent 15%,
            rgba(0, 0, 0, 0.72) 100%
        );
}


/* ============================================================
   18. GLASS FOUNDATION
   ============================================================ */

.glass {
    background:
        rgba(12, 12, 12, 0.68);

    border:
        1px solid var(--color-border);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.glass--strong {
    background:
        rgba(8, 8, 8, 0.84);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);
}


/* ============================================================
   19. VISIBILITY UTILITIES
   ============================================================ */

.is-hidden {
    display:
        none !important;
}

.is-invisible {
    visibility:
        hidden !important;
}

.is-visible {
    visibility:
        visible !important;
}

.sr-only {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}


/* ============================================================
   20. MOTION UTILITIES
   ============================================================ */

.fade-in {
    animation:
        suno-fade-in
        var(--motion-cinematic)
        var(--ease-smooth)
        both;
}

.fade-up {
    animation:
        suno-fade-up
        var(--motion-cinematic)
        var(--ease-smooth)
        both;
}

.scale-in {
    animation:
        suno-scale-in
        var(--motion-cinematic)
        var(--ease-smooth)
        both;
}

@keyframes suno-fade-in {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }
}

@keyframes suno-fade-up {

    from {
        opacity:
            0;

        transform:
            translateY(24px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes suno-scale-in {

    from {
        opacity:
            0;

        transform:
            scale(0.97);
    }

    to {
        opacity:
            1;

        transform:
            scale(1);
    }
}


/* ============================================================
   21. IMAGE / MEDIA FOUNDATION
   ============================================================ */

.media-cover {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.media-contain {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}

.media-cinematic {
    overflow:
        hidden;

    background:
        var(--color-surface);
}

.media-cinematic img,
.media-cinematic video {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--motion-cinematic) var(--ease-smooth);
}


/* ============================================================
   22. ASPECT RATIO UTILITIES
   ============================================================ */

.ratio-16-9 {
    aspect-ratio:
        16 / 9;
}

.ratio-16-10 {
    aspect-ratio:
        16 / 10;
}

.ratio-4-5 {
    aspect-ratio:
        4 / 5;
}

.ratio-1-1 {
    aspect-ratio:
        1 / 1;
}


/* ============================================================
   23. PERFORMANCE / CONTAINMENT FOUNDATION
   ============================================================ */

.content-visibility-auto {
    content-visibility:
        auto;

    contain-intrinsic-size:
        500px;
}

.paint-contained {
    contain:
        paint;
}

.layout-contained {
    contain:
        layout;
}


/* ============================================================
   24. MOBILE FOUNDATION
   ============================================================ */

@media (max-width: 900px) {

    :root {
        --header-height:
            4.35rem;

        --page-padding:
            clamp(1rem, 3.5vw, 2rem);

        --section-padding:
            clamp(3.5rem, 8vw, 6rem);
    }
}


@media (max-width: 600px) {

    :root {
        --page-padding:
            1rem;

        --section-padding:
            3.5rem;

        --text-hero:
            clamp(2.6rem, 13vw, 4.2rem);
    }

    body {
        overflow-x:
            hidden;
    }
}


@media (max-width: 420px) {

    :root {
        --section-padding:
            3rem;
    }
}


/* ============================================================
   25. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* ============================================================
   END — SUNOSUNAO CORE DESIGN SYSTEM V2.0
   ============================================================ */