/*
 * Échelle typographique et garde-fous d'accessibilité partagés.
 * Chargé après les thèmes afin que chaque interface conserve son identité
 * visuelle sans sacrifier la lisibilité.
 */

:root {
    --a11y-text: #f5f7fb;
    --a11y-muted: #b8c3d2;
    --a11y-subtle: #9eaabd;
    --a11y-small: .8125rem;
    --a11y-ui: .875rem;
    --a11y-body: 1rem;
    --a11y-lead: 1.125rem;
    --a11y-focus: #72d9ff;
}

html {
    font-size: clamp(16px, calc(15px + .08vw), 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--a11y-body);
    line-height: 1.6;
}

:where(p, li, dd, dt, figcaption) { line-height: 1.65; }
:where(button, input, select, textarea) { font: inherit; }

:where(
    button,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .button
) {
    min-block-size: 2.75rem;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 1rem;
    line-height: 1.5;
}

:where(button, [role="button"], .button) {
    font-size: var(--a11y-ui);
    line-height: 1.35;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--a11y-focus);
    outline-offset: 3px;
}

::placeholder {
    color: var(--a11y-subtle);
    opacity: 1;
}

.portal-shell.portal-shell small,
.battlepass-shell.battlepass-shell small,
.wiki-shell.wiki-shell small {
    font-size: var(--a11y-small);
    line-height: 1.4;
}

/* Portail principal ------------------------------------------------------- */
.portal-shell {
    --a11y-focus: #ff9b63;
    --muted: #b8c4d4;
    font-size: var(--a11y-body);
}

.portal-shell.portal-shell :where(.main-nav a, .online-pill, .account-chip span) {
    font-size: var(--a11y-ui);
    line-height: 1.35;
}

.portal-shell.portal-shell :where(.button, .filter-bar a, .pagination a, .text-button) {
    font-size: .9375rem;
}

.portal-shell.portal-shell :where(.eyebrow, .tag, .hero-stats span) {
    font-size: var(--a11y-small);
    line-height: 1.4;
}

.portal-shell.portal-shell :where(
    .feature-card p,
    .info-card p,
    .steps-grid p,
    .news-card-body p,
    .notice p,
    .empty-state p
) {
    color: var(--a11y-muted);
    font-size: var(--a11y-body);
}

.portal-shell.portal-shell :where(.news-card-body time, .article-meta, .site-footer, .footer-copy) {
    color: var(--a11y-muted);
    font-size: var(--a11y-ui);
}

.portal-shell .article-body {
    font-size: var(--a11y-lead);
    line-height: 1.75;
}

.portal-shell .news-cover { color: rgba(255, 255, 255, .62); }

/* Passe de combat -------------------------------------------------------- */
.battlepass-shell {
    --a11y-focus: #72dcff;
    color: var(--a11y-text);
    font-size: var(--a11y-body);
}

.battlepass-shell.battlepass-shell :where(.bp-sitebar-nav a, .bp-server-state, .bp-account, .bp-discord-login) {
    font-size: var(--a11y-ui);
    line-height: 1.35;
}

.battlepass-shell .bp-pass-lane > header small,
.battlepass-shell .bp-pass-chip > strong small,
.battlepass-shell .bp-pass-chip > i {
    color: var(--a11y-subtle);
    font-size: .75rem;
    line-height: 1.3;
}

.battlepass-shell .bp-pass-lane > header strong,
.battlepass-shell .bp-pass-chip > strong {
    font-size: var(--a11y-ui);
    line-height: 1.35;
}

.battlepass-shell .bp-pass-chip { min-height: 3.25rem; }

.battlepass-shell .bp-pass-chip.is-active > i {
    border: 1px solid color-mix(in srgb, var(--nav-accent) 58%, white 12%);
    background: #0b1421;
    color: #fff;
}

.battlepass-shell .bp-reward-eyebrow,
.battlepass-shell .bp-reward-badges,
.battlepass-shell .bp-reward-badges .bp-reward-rarity,
.battlepass-shell .bp-reward-price small {
    color: var(--a11y-muted);
    font-size: .75rem;
    line-height: 1.35;
}

.battlepass-shell .bp-reward-title {
    font-size: clamp(1.5rem, 1.45vw, 2rem);
    line-height: 1.12;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.battlepass-shell .bp-page-progress,
.battlepass-shell .bp-page-rail a { font-size: var(--a11y-ui); }

.battlepass-shell .bp-page-rail a i { font-size: .75rem; }

.battlepass-shell .bp-reward-copy h3 {
    font-size: 1rem;
    line-height: 1.4;
}

.battlepass-shell .bp-reward-copy h3 strong,
.battlepass-shell .bp-reward-price strong { font-size: .9375rem; }

.battlepass-shell .bp-reward-quantity { color: #d9f4ff; }

.battlepass-shell.battlepass-shell :where(
    .bp-reward-action button,
    .bp-reward-action > a,
    .bp-reward-state,
    .bp-reward-footer button,
    .bp-page-buy-login
) {
    min-height: 2.75rem;
    font-size: var(--a11y-ui);
    line-height: 1.35;
}

.battlepass-shell .bp-reward-footer button strong {
    min-height: 0;
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-size: var(--a11y-ui);
    line-height: 1.1;
}

.battlepass-shell .bp-mission-header > div > small,
.battlepass-shell .bp-quest-section-header small,
.battlepass-shell .bp-quest-card > header small,
.battlepass-shell .bp-quest-empty > small,
.battlepass-shell .bp-quest-empty > strong {
    font-size: var(--a11y-small);
    line-height: 1.4;
}

.battlepass-shell .bp-mission-header h2 {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    line-height: 1.1;
}

.battlepass-shell .bp-mission-tabs button,
.battlepass-shell .bp-mission-wallet,
.battlepass-shell .bp-quest-card > footer,
.battlepass-shell .bp-quest-section-header p { font-size: .9375rem; }

.battlepass-shell .bp-quest-section-header h3 {
    font-size: clamp(1.5rem, 1.7vw, 2rem);
    line-height: 1.15;
}

.battlepass-shell .bp-quest-section-header > strong span {
    color: var(--a11y-muted);
    font-size: .75rem;
}

.battlepass-shell.battlepass-shell :where(.bp-quest-card h4, .bp-quest-card > p, .bp-quest-card > footer > span) {
    font-size: var(--a11y-body);
    line-height: 1.55;
}

.battlepass-shell .bp-quest-empty p {
    color: var(--a11y-muted);
    font-size: var(--a11y-body);
    line-height: 1.65;
}

/* Wiki public et studio -------------------------------------------------- */
.wiki-shell {
    --a11y-focus: #f4c875;
    --muted: #b7c0cc;
    --muted-2: #9fa9b7;
    font-size: var(--a11y-body);
}

.wiki-shell.wiki-shell :where(.wiki-sitebar-nav a, .wiki-server-state, .wiki-discord-login, .wiki-sitebar-account) {
    font-size: var(--a11y-ui);
    line-height: 1.35;
}

.wiki-shell.wiki-shell :where(.category-link, .subcategory-list a, .button, .user-chip, .language-menu a) {
    color: var(--a11y-muted);
    font-size: .9375rem;
    line-height: 1.45;
}

.wiki-shell.wiki-shell :where(
    .eyebrow,
    .nav-label,
    .drawer-footer,
    .hero-kicker,
    .hero-stats span,
    .card-category,
    .category-count,
    .article-card-meta,
    .breadcrumbs,
    .article-category-pill,
    .status-badge,
    .article-byline
) {
    color: var(--a11y-subtle);
    font-size: var(--a11y-small);
    line-height: 1.45;
}

.wiki-shell.wiki-shell :where(
    .drawer-brand small,
    .search-result-link small,
    .featured-copy p,
    .category-card p,
    .item-mini-card p,
    .article-card-body p,
    .toc-card a,
    .tag-list a,
    .site-footer
) {
    color: var(--a11y-muted);
    font-size: .9375rem;
    line-height: 1.6;
}

.wiki-shell .prose {
    color: #d4d8df;
    font-size: 1.0625rem;
    line-height: 1.8;
}

.wiki-shell .prose :where(code, table, figcaption) { font-size: var(--a11y-ui); }

.wiki-shell .card-arrow { color: #b9c4d2; }

.wiki-shell.wiki-shell :where(
    .subcategory-chips a,
    .filter-reset,
    .item-card-top,
    .item-catalog-main > p,
    .item-card-facts span,
    .item-source-preview span,
    .item-effect-grid p,
    .loot-source-main small,
    .loot-source-rate span,
    .loot-source-rate small,
    .related-grid small,
    .login-card label,
    .form-error,
    .back-link
) {
    color: var(--a11y-muted);
    font-size: var(--a11y-small);
    line-height: 1.5;
}

.wiki-shell.studio-page :where(
    .studio-nav a,
    .studio-nav button,
    .studio-stat small,
    .studio-panel-head p,
    .studio-panel-head > a,
    .studio-table th,
    .table-title small,
    .field-group > label,
    .field-group > small,
    .errorlist,
    .editor-word-count,
    .card-heading small,
    .switch-field small,
    .media-name small,
    .category-admin-row small,
    .language-admin-row small,
    .library-info small,
    .library-info p,
    .revision-list small,
    .editor-help-card summary small,
    .editor-help-content p
) {
    color: var(--a11y-subtle);
    font-size: var(--a11y-small);
    line-height: 1.5;
}

.wiki-shell.studio-page :where(
    .studio-table td,
    .table-title strong,
    .field-group input:not([type="checkbox"]):not([type="radio"]),
    .field-group textarea,
    .field-group select,
    .rich-editor,
    .switch-field strong,
    .checkbox-list label,
    .formset-row input,
    .formset-row select,
    .formset-row textarea,
    .translation-link-list a,
    .translation-status-note
) {
    font-size: var(--a11y-body);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .battlepass-shell .bp-reward-title {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .battlepass-shell .bp-pass-lane > header strong { font-size: .75rem; }
    .wiki-shell.wiki-shell :where(.category-link, .subcategory-list a) { min-height: 2.75rem; }
}

@media (max-width: 1350px) and (min-width: 901px) {
    .portal-shell .online-pill { display: none; }
}

@media (min-width: 901px) {
    .battlepass-shell .battlepass-command {
        grid-template-rows: 144px minmax(0, 1fr);
    }

    .battlepass-shell .bp-pass-lane > header strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .battlepass-shell .bp-reward-header { min-height: 96px; }
}

@media (prefers-contrast: more) {
    :root {
        --a11y-muted: #d5dce6;
        --a11y-subtle: #c4cedb;
    }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline-width: 4px;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
    }
}

/* Échelle visuelle unifiée, calée sur le passe de combat ---------------- */
:root {
    --defiant-text-xs: .75rem;
    --defiant-text-ui: .875rem;
    --defiant-text-body: 1rem;
    --defiant-title-card: 1.125rem;
    --defiant-title-section: clamp(1.75rem, 2.5vw, 2.5rem);
    --defiant-title-page: clamp(2.5rem, 4vw, 4rem);
    --defiant-control-height: 2.75rem;
    --defiant-section-space: clamp(2.75rem, 5vw, 4.5rem);
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) {
    font-size: var(--defiant-text-body);
    line-height: 1.6;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(
    .eyebrow,
    .hero-kicker,
    .card-category,
    .tag,
    .bp-reward-eyebrow,
    .bp-reward-rarity,
    .bp-quest-card > header small
) {
    font-size: var(--defiant-text-xs);
    line-height: 1.4;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(
    button,
    [role="button"],
    .button,
    .main-nav a,
    .bp-sitebar-nav a,
    .wiki-sitebar-nav a
) {
    min-height: var(--defiant-control-height);
    font-size: var(--defiant-text-ui);
    line-height: 1.35;
}

/* Une largeur de lecture commune, identique au canevas du passe. */
.portal-shell .portal-container,
.wiki-shell .main-content {
    max-width: 98.75rem;
}

/* Titres de page : même hiérarchie dans le portail, le passe et le wiki. */
.portal-shell :where(.hero h1, .page-hero h1, .article-heading h1),
.battlepass-shell :where(.hero-copy h1, .pass-hero-copy h1),
.wiki-shell :where(.hero h1, .item-index-hero h1, .article-header h1) {
    font-size: var(--defiant-title-page) !important;
    line-height: 1.02;
    letter-spacing: -.035em;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(
    .section-heading h2,
    .section-heading h1
),
.battlepass-shell :where(.bp-reward-title, .bp-mission-header h2, .bp-quest-section-header h3) {
    font-size: var(--defiant-title-section);
    line-height: 1.12;
    letter-spacing: -.02em;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(
    .feature-card h3,
    .news-card h2,
    .news-card h3,
    .info-card h3,
    .pack-card h3,
    .article-card h3,
    .category-card h3,
    .item-catalog-card h2,
    .item-catalog-card h3,
    .item-mini-card h3,
    .bp-reward-copy h3,
    .bp-quest-card h4
) {
    font-size: var(--defiant-title-card);
    line-height: 1.35;
}

:where(.portal-shell, .battlepass-shell, .wiki-shell) :where(
    .hero p,
    .page-hero p,
    .section-heading > p,
    .feature-card p,
    .news-card p,
    .info-card p,
    .pack-card p,
    .article-card p,
    .category-card p,
    .item-catalog-card p,
    .bp-quest-card p
) {
    font-size: var(--defiant-text-body);
    line-height: 1.65;
}

.portal-shell .section-block,
.portal-shell main > section:not(.hero):not(.page-hero),
.wiki-shell .feature-section,
.wiki-shell .categories-section,
.wiki-shell .articles-section {
    padding-block: var(--defiant-section-space);
}

@media (max-width: 900px) {
    :root {
        --defiant-title-page: clamp(2.25rem, 11vw, 3.25rem);
        --defiant-title-section: clamp(1.625rem, 7vw, 2.125rem);
        --defiant-section-space: 2.75rem;
    }
}
