/* Design tokens — single source of truth för Headphonauts visuella system.
 *
 * REGEL: inga ad-hoc-värden i andra filer. Är värdet inte här ska det
 * läggas till här först. Detta är 2026-Foundation per docs/mvp.md S1.
 *
 * Använd dem som CSS custom properties: color: var(--fg);
 */

:root {
    /* ---- Color ---- */
    /* Bakgrundsskala — djup till elevated. Aldrig pure black; vi har en
     * subtil blå underton för att luften ska kännas levande. */
    --bg-deep: #0a0c10;
    --bg-surface: #14171c;
    --bg-elevated: #1c2128;
    --bg-overlay: rgba(10, 12, 16, 0.7);

    --border: #252b34;
    --border-strong: #353c47;

    /* Text */
    --fg: #e8eaed;
    --fg-muted: #8b95a8;
    --fg-subtle: #5c6473;
    --fg-on-accent: #0a0c10;

    /* Accent — primary action + AI-genererat innehåll. EN färg.
     * accent-glow för soft halos och focus rings. */
    --accent: #5b8dff;
    --accent-strong: #4070e8;
    --accent-soft: #7da7ff;
    --accent-glow: rgba(91, 141, 255, 0.18);

    /* Status — använd ihop med ikon, inte ensamt (color-blind safety).
     * *-glow används för pending/error-states som pulserar (clips, playhead). */
    --success: #4caf50;
    --warning: #ffb84d;
    --warning-glow: rgba(255, 184, 77, 0.35);
    --danger: #ff5b6a;
    --danger-glow: rgba(255, 91, 106, 0.5);
    --info: var(--accent);

    /* Surface-hover används som befintlig "lite ljusare bakgrund" till
     * hover på paneler. Hover-overlay är en RGBA-overlay som funkar
     * ovanpå ALLT (inte bara fasta färger). Använd hover-overlay för
     * knappar; surface-hover för paneler. */
    --surface-hover: var(--bg-elevated);
    --hover-overlay: rgba(255, 255, 255, 0.04);
    --pressed-overlay: rgba(255, 255, 255, 0.08);

    /* ---- Typography ---- */
    /* Modular scale. Inga andra storlekar.
     * Line-heights är inbakade i tokens — håller rytmen. */
    --text-xs: 11px;
    --text-xs-lh: 15px;
    --text-sm: 13px;
    --text-sm-lh: 20px;
    --text-md: 15px;
    --text-md-lh: 23px;
    --text-lg: 18px;
    --text-lg-lh: 25px;
    --text-xl: 24px;
    --text-xl-lh: 32px;

    /* ---- Dense UI scale (app/) ----
     * The scale above starts at 11px, which is a READING size. The DAW surface in
     * app/ is information-dense — its labels, meters and lane names render at 8-10px
     * against a 13px root — so it had no step to reach for and grew 39 ad-hoc
     * font-size values across 327 declarations, in flat contradiction of this file's
     * own rule. This is that missing range, not a second opinion about the one above:
     * --ui-text-xl equals --text-sm (13px), so the two scales meet rather than
     * overlap, and everything below is the density the reading scale never covered.
     *
     * Anchored on the sizes app/ already rendered most (0.72rem carried a third of
     * all declarations) so adopting it moves no element more than a few percent.
     * Expressed in rem: the DAW's density should follow the user's font settings.
     * ADDITIVE — nothing above is redefined, so web/ is untouched. */
    --ui-text-2xs: 0.6rem;
    --ui-text-xs: 0.66rem;
    --ui-text-sm: 0.72rem;
    --ui-text-md: 0.8rem;
    --ui-text-lg: 0.88rem;
    --ui-text-xl: 1rem;
    --ui-text-2xl: 1.15rem;
    --ui-text-3xl: 1.6rem;

    /* Font-stack — variable när möjligt */
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
                 "SF Pro Text", "Inter var", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo",
                 Consolas, monospace;
    --font-display: var(--font-sans);

    /* Vikter — bara tre */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* ---- Spacing — 4-stegs skala ---- */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Radius — 3 storlekar ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ---- Layering — EN skala, samma disciplin som type/spacing ----
     * Allt som staplas mot ANDRA YTOR hämtar sitt värde här. Rå z-index är bara
     * tillåtet för komponent-LOKAL stapling (0–9: en etikett över sitt eget rutnät),
     * aldrig för ett lager som möter en annan yta. Ordningen är kontraktet:
     * en toast måste synas över en modal, en bekräftelse-dialog avbryter allt,
     * touren undervisar ovanpå appen, och skip-länken är alltid nåbar.
     * (Före detta: 17 ad hoc-värden med oavsiktliga oavgjorda — .toaster,
     * .library-drawer och .flow-picker-backdrop låg alla på 60 och avgjordes av
     * DOM-ordning. Se docs/ux-principles.md lag 5.) */
    --z-raised: 10; /* flytande inuti en vy: drag-ghost, minimap */
    --z-sticky: 20; /* sticky rubrik/kolumn i en vy */
    --z-panel: 100; /* sidopanel/drawer över arbetsytan */
    --z-scrim: 200; /* scrim bakom en popover */
    --z-popover: 210; /* meny, tray, picker — ovanpå sin scrim */
    --z-modal: 300; /* modal, sheet, full takeover */
    --z-menu: 400; /* kontextmeny — kan öppnas INUTI en modal */
    --z-dialog: 500; /* bekräftelse-dialog: avbryter allt */
    --z-toast: 600; /* feedback ska alltid synas */
    --z-tour: 700; /* undervisningslagret ovanpå appen */
    --z-skip: 800; /* tangentbordets escape hatch, alltid överst */

    /* ---- Elevation / shadow ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 0 3px var(--accent-glow);

    /* ---- Motion ---- */
    /* Tre easings. Snappy för micro-interactions, smooth för layout-
     * byten, bounce för "AI-action lands" + lekfulla detaljer. */
    --ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.5, 1.6, 0.4, 1);

    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 320ms;

    /* ---- Layout konstanter ---- */
    --rail-collapsed: 48px;
    --rail-expanded: 240px;
    --inspector-width: 360px;
    --ai-drawer-collapsed: 64px;
    --ai-drawer-expanded: 50vh;
    --transport-height: 56px;

    /* Här låg en äldre "Z-stack" (--z-base/--z-elevated/--z-overlay + en ANDRA
     * uppsättning --z-modal: 1000, --z-popover: 1100, --z-toast: 1200). Den stod
     * SENARE i samma :root-regel än lagerskalan ovan, så det var den som vann:
     * modal resolvade till 1000 och dialog till 500, alltså låg varje bekräftelse-
     * /prompt-dialog UNDER modalen som öppnade den. Rename i Projects-modalen gick
     * inte att klicka på — modalen åt klicket (#378). Popover (1100) låg dessutom
     * över modal, och meny/tour/skip-länk hamnade under den.
     * De tre --z-base/--z-elevated/--z-overlay användes inte av någon regel.
     * Skalan ovan är den enda — lägg aldrig till en andra. */
}

/* Respekt för system-preferens */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}

/* Bas-element — håll det minimal, ingen ramshackle reset.
 * Detta sätter botten så resten av appen kan ärva. */
html, body {
    background: var(--bg-deep);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--accent-glow);
    color: var(--fg);
}

/* Focus ring — synlig keyboard-only. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }