/*
==========================================================
HOLOCOLLABDEX
MAIN STYLESHEET
==========================================================
*/

/* Base */

@import url("./base/reset.css");
@import url("./base/typography.css");
@import url("./base/accessibility.css");

/* Layout */

@import url("./layout/header.css");

/* Components */

@import url("./components/empty-state.css");
@import url("./components/buttons.css");
@import url("./components/filters.css");
@import url("./components/dropdown.css");
@import url("./components/badges.css");
@import url("./components/talent-emoji.css");


/* ==========================================================
   THEME
========================================================== */

:root {
    color-scheme: light;
    --page-background:
        linear-gradient(
            90deg,
            #eef8ff 0%,
            #f7f9fc 48%,
            #f5f0ff 100%
        );
    --surface-primary: #ffffff;
    --surface-secondary: #f8f9fc;
    --surface-hover: #f5f7fb;
    --text-primary: #222222;
    --text-secondary: #444444;
    --text-muted: #7a8498;
    --border-primary: #e5e9f1;
    --border-soft: #eef0f4;
    --shadow-header: rgba(0, 0, 0, .08);
    --shadow-menu: rgba(0, 0, 0, .10);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page-background:
        linear-gradient(
            90deg,
            #111823 0%,
            #11131a 48%,
            #171321 100%
        );
    --surface-primary: #191c25;
    --surface-secondary: #20242f;
    --surface-hover: #272c39;
    --text-primary: #f3f5f8;
    --text-secondary: #d3d8e2;
    --text-muted: #98a2b3;
    --border-primary: #303644;
    --border-soft: #292f3b;
    --shadow-header: rgba(0, 0, 0, .28);
    --shadow-menu: rgba(0, 0, 0, .34);
}

html, body {
    background: var(--page-background);
    color: var(--text-primary);
}

/* Direct theme switch: no transition animation. */

/*
Some components have their own hover/background/color transitions.
During a theme switch those transitions would animate the new theme
values even though the theme change itself is direct.

This class exists only for the single paint in which data-theme changes.
*/
html.theme-switch-instant *,
html.theme-switch-instant *::before,
html.theme-switch-instant *::after {
    transition: none !important;
}


/* Canonical branch palette */

:root {
    --branch-jp: #ff6b81;
    --branch-jp-soft: #fff0f3;

    --branch-en: #4da6ff;
    --branch-en-soft: #eef8ff;

    --branch-id: #ffb84d;
    --branch-id-soft: #fff7e8;

    --branch-devis: #8a93a4;
    --branch-devis-secondary: #b8bfca;
    --branch-devis-soft: #f3f5f8;

    --branch-stars-jp: #9d78e8;
    --branch-stars-jp-soft: #f4efff;

    --branch-stars-en: #55c878;
    --branch-stars-en-soft: #edfff2;
}

.page-eyebrow {
    display: inline-block;

    color: #7666e8;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

html {
    scrollbar-gutter: stable;
}