/* Musicevolution design tokens.
   Type, colour, space, radius, elevation, motion, and grid.
   Faces are declared in base.html so preload and @font-face share one ?v= URL. */

:root {
    --font-display: "Inter Tight", "Inter Tight Fallback", "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-25: 25px;
    --fs-31: 31px;
    --fs-39: 39px;
    --fs-49: 49px;
    --fs-61: 61px;
    --fs-76: 76px;
    --fs-96: 96px;
    --fs-display: clamp(49px, 7vw, 96px);

    --leading-display: 1.0;
    --leading-heading: 1.15;
    --leading-body: 1.6;

    --tracking-display-tight: -0.045em;
    --tracking-display: -0.04em;
    --tracking-display-open: -0.03em;
    --tracking-meta: 0.12em;

    --color-ink-950: #0b0c0b;
    --color-ink-900: #121412;
    --color-ink-800: #1b1e1b;
    --color-line: rgba(255, 255, 255, 0.10);
    --color-text-100: #f4f5f2;
    --color-text-300: #b8bdb4;
    --color-text-500: #8b9187;
    --color-green-600: #2f853e;
    --color-green-400: #4cc96b;
    --color-amber: #f0b429;
    --color-amber-ink: #f0b429;
    --color-page: var(--color-ink-950);
    --color-text: var(--color-text-100);
    --color-text-secondary: var(--color-text-300);
    --color-brand-text: var(--color-green-400);
    --color-focus: #4cc96b;
    --focus-ring: 2px solid var(--color-focus);
    --focus-ring-offset: 3px;

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;
    --space-128: 128px;
    --space-section: var(--space-96);
    --space-card: var(--space-24);
    --space-gutter: var(--space-24);

    --radius-6: 6px;
    --radius-12: 12px;
    --radius-20: 20px;
    --radius-pill: 999px;

    --shadow-surface: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    --shadow-raised: 0 24px 60px rgba(0, 0, 0, 0.45);

    --duration-hover: 150ms;
    --duration-reveal: 300ms;
    --duration-hero: 600ms;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

    --grid-columns: 12;
    --content-max: 1200px;
    --page-gutter: 48px;
    --page-gutter-mobile: 20px;
}

[data-bs-theme="light"] {
    --color-page: #fafaf7;
    --color-text: #111311;
    --color-text-secondary: #5b6158;
    --color-brand-text: #1f6b31;
    --color-amber-ink: #8a5c00;
    --color-focus: #1f6b31;
    --focus-ring: 2px solid var(--color-focus);
    --color-ink-950: #fafaf7;
    --color-ink-900: #ffffff;
    --color-ink-800: #f3f3ef;
    --color-line: rgba(17, 19, 17, 0.10);
    --color-text-100: #111311;
    --color-text-300: #5b6158;
    --color-text-500: #5b6158;
    --shadow-raised: 0 16px 40px rgba(17, 19, 17, 0.10);
}

@media (max-width: 767.98px) {
    :root {
        --page-gutter: var(--page-gutter-mobile);
        --space-section: var(--space-64);
        --space-card: var(--space-16);
        --space-gutter: var(--space-16);
    }
}

/* Later layout PRs opt into the grid. Current pages keep their structure. */
.u-content {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.u-grid-12 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--space-gutter);
}

.u-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.navbar-brand,
.brand-text {
    font-family: var(--font-display);
}

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