/*
 * GraphicStream MarketPlace - design tokens
 *
 * IMPORTANT : le template SB Admin 2 charge son propre socle CSS de type
 * Bootstrap 4. Le package npm Bootstrap 5.3.x est utilise pour le JavaScript,
 * mais sa feuille CSS n'est pas chargee par _Layout.cshtml. Les composants du
 * portail s'appuient donc sur ces tokens et non sur des utilitaires propres a
 * une version de Bootstrap.
 */

:root {
    --mp-color-bg: #fbf7f1;
    --mp-color-surface: #ffffff;
    --mp-color-surface-soft: #fffaf4;
    --mp-color-surface-strong: #f7efe4;
    --mp-color-text: #191714;
    --mp-color-text-soft: #6f6257;
    --mp-color-text-faint: #998a7d;
    --mp-color-border: #eadfce;
    --mp-color-border-strong: #decbb3;

    --mp-color-primary: #ed7b32;
    --mp-color-primary-hover: #d9651f;
    --mp-color-primary-active: #bc5217;
    --mp-color-primary-soft: #fff0e1;
    --mp-color-primary-border: #f1c49f;

    --mp-color-success: #2f8056;
    --mp-color-success-soft: #edf8f1;
    --mp-color-success-border: #b8dec8;
    --mp-color-warning: #b97a0d;
    --mp-color-warning-soft: #fff7df;
    --mp-color-warning-border: #ecd38b;
    --mp-color-danger: #bd4438;
    --mp-color-danger-hover: #9f3027;
    --mp-color-danger-soft: #fff0ee;
    --mp-color-danger-border: #efb9b3;

    --mp-color-sidebar: #171c22;
    --mp-color-sidebar-soft: #21272e;
    --mp-color-sidebar-border: #313840;
    --mp-color-sidebar-text: #f8f5ef;
    --mp-color-sidebar-muted: #aeb7c0;

    --mp-font-family: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --mp-font-size-xs: .74rem;
    --mp-font-size-sm: .84rem;
    --mp-font-size-md: .94rem;
    --mp-font-size-lg: 1.05rem;
    --mp-font-size-xl: 1.28rem;
    --mp-font-size-2xl: clamp(1.55rem, 1.25rem + 1vw, 2rem);

    --mp-space-1: .25rem;
    --mp-space-2: .5rem;
    --mp-space-3: .75rem;
    --mp-space-4: 1rem;
    --mp-space-5: 1.25rem;
    --mp-space-6: 1.5rem;
    --mp-space-7: 1.75rem;
    --mp-space-8: 2rem;
    --mp-space-10: 2.5rem;
    --mp-space-12: 3rem;

    --mp-radius-sm: 8px;
    --mp-radius-md: 12px;
    --mp-radius-lg: 16px;
    --mp-radius-xl: 20px;
    --mp-radius-pill: 999px;

    --mp-shadow-sm: 0 4px 14px rgba(73, 48, 24, .045);
    --mp-shadow-md: 0 10px 28px rgba(73, 48, 24, .075);
    --mp-shadow-lg: 0 18px 48px rgba(73, 48, 24, .105);

    --mp-transition-fast: 140ms ease;
    --mp-transition: 180ms ease;

    --mp-content-max: 1480px;
    --mp-sidebar-width: 14rem;
    --mp-topbar-height: 4.5rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.marketplace-body {
    min-height: 100vh;
    margin: 0;
    background: var(--mp-color-bg);
    color: var(--mp-color-text);
    font-family: var(--mp-font-family);
    font-size: var(--mp-font-size-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.marketplace-body a {
    color: var(--mp-color-primary-hover);
    text-decoration: none;
}

.marketplace-body a:hover {
    color: var(--mp-color-primary-active);
    text-decoration: none;
}

.marketplace-body h1,
.marketplace-body h2,
.marketplace-body h3,
.marketplace-body h4,
.marketplace-body h5,
.marketplace-body h6 {
    color: var(--mp-color-text);
    font-family: var(--mp-font-family);
    font-weight: 750;
    letter-spacing: -.018em;
}

.marketplace-body p {
    color: var(--mp-color-text-soft);
}

.marketplace-body ::selection {
    background: var(--mp-color-primary-soft);
    color: var(--mp-color-text);
}