/*
 * Central design tokens for the nørth website.
 * Add semantic values here only when a component actually needs them.
 */

:root {
    /* Colors */

    --color-primary: #F0F0F0;
    --color-secondary: #A1A4A5;
    --color-tertiary: #545657;
    --color-border: #212629;
    --color-border-active: #2B2F34;
    --color-surface: #151619;
    --color-surface-hover: #1A1D1F;
    --color-background: #000000;

    --color-overlay-backdrop: rgb(0 0 0 / 78%);
    --color-fixed-action-backdrop: rgb(0 0 0 / 20%);
    --color-overlay-scrim: rgb(0 0 0 / 52%);
    --color-highlight-scrim-start: rgb(0 0 0 / 8%);
    --color-highlight-scrim-end: rgb(0 0 0 / 100%);

    /* Typography */

    --font-family-base: "Google Sans Flex", sans-serif;

    --font-size-h1: 27px;
    --font-size-h2: 20px;
    --font-size-h3: 14px;
    --font-size-body: 16px;
    --font-size-body-small: 14px;
    --font-size-caption: 12px;
    --font-size-label: 10px;

    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-spacing-h1: 0.04em;
    --font-spacing-h2: 0.02em;
    --font-spacing-h3: 0.1em;
    --font-spacing-label: 0.12em;

    --line-height-tight: 1.15;
    --line-height-body: 1.4;

    /* Layout scale */

    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 36px;
    --space-8: 48px;
    --space-9: 72px;
    --space-10: 96px;

    --radius-icon-control: 8px;
    --radius-control: 12px;
    --radius-card: 10px;
    --radius-highlight: 16px;
    --radius-modal: 16px;
    --radius-pill: 999px;

    /* Motion */

    --transition-fast: 320ms ease;
    --transition-interactive: 400ms ease;
    --transition-overlay: 480ms ease;
    --scale-pressed: 0.985;

    /* Z-index */

    --z-index-header: 20;
    --z-index-menu: 100;
    --z-index-modal: 200;
    --z-index-toast: 300;

    /* Page layout */

    --viewport-min-width: 320px;
    --page-max-width: 430px;
    --page-padding-inline: var(--space-6);
    --page-padding-top: var(--space-6);
    --page-padding-bottom: var(--space-5);
    --page-header-height: 44px;
    --page-footer-min-height: 92px;
    --content-section-gap: var(--space-7);
    --public-page-max-width: 75rem;
    --public-page-padding-inline: var(--space-8);
    --public-menu-width: 20rem;

    --management-page-max-width: 75rem;
    --management-page-padding-inline: var(--space-8);
    --management-menu-width: 20rem;
    --release-highlight-aspect-ratio: 16 / 9;
    --release-highlight-aspect-ratio-wide: 2 / 1;

    /* Icons */

    --icon-size-xs: 14px;
    --icon-size-sm: 18px;
    --icon-size-md: 24px;
    --icon-size-lg: 36px;

    --icon-image-category: url("/static/icons/bold/category.33d2999f3c49.svg");
    --icon-image-close-circle: url("/static/icons/outline/close_circle.40ab02051db4.svg");
    --icon-image-close-circle-bold: url("/static/icons/bold/close-circle.485bc96cbb71.svg");
    --icon-image-logo: url("/static/icons/bold/logo.a79d6a3ad910.svg");
    --icon-image-heart-bold: url("/static/icons/bold/heart.26a74a781520.svg");
    --icon-image-heart-outline: url("/static/icons/outline/heart.b09c9fa5b64b.svg");
    --icon-image-messages: url("/static/icons/bold/messages_3.73a12d3e3ce1.svg");
    --icon-image-message: url("/static/icons/bold/message.fd648692a08f.svg");
    --icon-image-message-outline: url("/static/icons/outline/message.b23e34ed626a.svg");
    --icon-image-play-circle: url("/static/icons/bold/play_circle.b751275056f0.svg");
    --icon-image-pause-circle: url("/static/icons/bold/pause_circle.667f574182ab.svg");
    --icon-image-spotify: url("/static/icons/bold/spotify.dac080751b9e.svg");
    --icon-image-apple-music: url("/static/icons/bold/apple_music.3bba55d178b4.svg");
    --icon-image-youtube-music: url("/static/icons/bold/youtube_music.953491b01f4a.svg");
    --icon-image-square: url("/static/icons/outline/square.4385c3dde294.svg");
    --icon-image-tick-square: url("/static/icons/bold/tick_square.3f5ee007a923.svg");
    --icon-image-arrow-down: url("/static/icons/bold/arrow_down.ea7b7d32ceb2.svg");
    --icon-image-dashboard: url("/static/icons/bold/element-4.206f889e946c.svg");
    --icon-image-settings: url("/static/icons/bold/setting.18e3df94dc94.svg");
    --icon-image-arrow-left: url("/static/icons/bold/arrow-left.8ee76752b52e.svg");
    --icon-image-models: url("/static/icons/bold/driver-2.bc946858b00c.svg");

    /* Buttons */

    --button-min-height: 44px;
    --button-compact-height: 38px;
    --button-padding-inline: var(--space-5);
    --button-border-width: 1px;
    --button-border-radius: var(--radius-control);
    --button-icon-gap: var(--space-3);

    /* Forms */

    --form-control-min-height: 44px;
    --form-control-padding-inline: var(--space-5);
    --form-control-padding-block: var(--space-5);
    --form-control-border-width: 1px;
    --form-control-border-radius: var(--radius-control);
    --form-textarea-min-height: 170px;

    /* Components */

    --card-border-width: 1px;
    --audio-track-height: 4px;
    --modal-backdrop-blur: 8px;
    --site-header-padding: var(--space-6);
    --site-header-block-size: calc(
        var(--page-header-height)
        + var(--site-header-padding)
        + var(--site-header-padding)
    );
    --modal-max-width: 380px;
    --opacity-muted: 0.48;
    --opacity-disabled: 0.35;
    --opacity-busy: 0.55;
    --opacity-media-replace-hover: 0.72;
}

@media (min-width: 768px) {
    :root {
        --page-max-width: 520px;
        --page-padding-inline: var(--space-6);
        --page-padding-top: var(--space-7);
        --page-padding-bottom: var(--space-6);
    }
}

@media (min-width: 64rem) {
    :root {
        --font-size-h1: 24px;
        --font-size-h2: 18px;
        --font-size-h3: 12px;
        --font-size-body: 14px;
        --font-size-body-small: 12px;
        --font-size-caption: 11px;
        --font-size-label: 10px;
        --icon-size-md: 18px;

        --form-control-min-height: 46px;
    }
}