/*
 * Tokens overrides — corrige les contrastes legacy sur fonds clairs
 * et ajoute les tokens de spacing/container manquants.
 *
 * Stratégie : les anciens tokens (--text, --muted, --panel, --line, --shadow)
 * ont été conçus pour un thème SOMBRE. Ils restent valides sur le hero, le
 * footer et les surfaces foncées (.managed-container-surface), mais sur les
 * panneaux clairs (.detail-panel, .manifesto-home-shell, .account-* etc),
 * il faut les rescoper pour passer WCAG AA (≥4.5:1 texte normal).
 */

/* ========== 1. Tokens spacing / container ========== */
:root {
    /* Container "contenu" centré et plus étroit que le header pour laisser
       une vraie respiration sur les côtés en desktop large. */
    --em-container-max: 1400px;
    --em-container-narrow: 880px;
    --em-container-padding-x: clamp(1rem, 3vw, 2.5rem);
    --em-section-py: clamp(2rem, 5vw, 4rem);
    --em-section-py-tight: clamp(1.25rem, 3vw, 2rem);
    --em-page-py: clamp(1.5rem, 3.5vw, 3rem);
}

.container {
    width: min(var(--em-container-max), calc(100% - var(--em-container-padding-x) * 2));
    max-width: var(--em-container-max);
    margin-inline: auto;
}

/* Le hero couvre tout le viewport (edge-to-edge). Si un .container est
   posé directement à l'intérieur (.hero-home-inner par ex.), il est
   recentré aux mêmes dimensions que les autres containers. */
.hero,
.page-banner {
    width: 100%;
    max-width: none;
}

/* Sections de contenu : centrées sur la largeur du container, pas edge-to-edge.
   Le fond rose/paper du body reste visible sur les côtés. Le hero et les
   page-banner restent à 100% (gérés ci-dessus). */
.section {
    width: min(var(--em-container-max), calc(100% - var(--em-container-padding-x) * 2));
    max-width: var(--em-container-max);
    margin-inline: auto;
}

/* Quand une section est limitée comme ci-dessus, le .container enfant n'a
   plus besoin d'imposer sa propre largeur — il prend 100% de sa section. */
.section > .container {
    width: 100%;
    max-width: none;
}

/* ========== 2. Overrides contraste sur surfaces claires ========== */

/* Tout panneau "paper" doit avoir des tokens lisibles. */
.detail-panel,
.account-identity-card,
.account-orders-panel,
.account-security-panel,
.account-conversation-card,
.account-chat-panel,
.account-form-section,
.account-meta,
.manifesto-home-shell,
.manifesto-home-copy,
.manifesto-card,
.summary-card,
.cart-card,
.archive-cta-panel,
.section-container-surface,
.checkout-form-panel,
.checkout-summary-panel,
.checkout-identity-card,
.product-story-shell:not(.managed-container-surface-type-1),
.empty-state {
    --text: #251a13;          /* em-ink-700 */
    --muted: #5a4737;         /* em-ink-300 */
    --ink-soft: #5a4737;
    --panel: #fbf7f1;         /* em-paper-50 */
    --panel-strong: #f8f3ea;  /* em-paper-100 */
    --line: rgba(90, 66, 40, 0.16);
    --shadow: 0 14px 40px rgba(15, 10, 6, 0.10);
}

/* Renforcement large : tous les enfants des panneaux paper qui n'ont PAS
   une classe-marqueur explicite ont leur color forcée en em-ink-700.
   Les boutons, badges et liens conservent leurs propres couleurs. */
.detail-panel :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small, blockquote, time):not(.eyebrow):not(.account-status-pill):not(.pill):not(.button-primary):not(.button-secondary):not(.button-ghost):not(.special-offer-price-before):not(.special-offer-price-after),
.account-identity-card :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small, blockquote, time):not(.eyebrow):not(.account-status-pill):not(.pill),
.account-security-panel :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small):not(.eyebrow):not(.account-status-pill):not(.pill),
.account-orders-panel :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small):not(.eyebrow):not(.account-status-pill):not(.pill),
.checkout-form-panel :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small):not(.eyebrow):not(.account-status-pill):not(.pill),
.checkout-summary-panel :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small):not(.eyebrow):not(.account-status-pill):not(.pill),
.checkout-identity-card :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, label, legend, figcaption, span, strong, em, small):not(.eyebrow):not(.account-status-pill):not(.pill),
.manifesto-home-shell :where(p, h2, h3, span, strong, em):not(.eyebrow),
.archive-cta-panel :where(p, h2, h3, span, strong, em):not(.eyebrow),
.summary-card :where(p, h2, h3, span, strong, em):not(.eyebrow),
.cart-card :where(p, h2, h3, span, strong, em):not(.eyebrow),
.section-container-surface :where(.account-meta, .account-meta > span) {
    color: #251a13; /* em-ink-700 */
}

/* Pour les surfaces qui restent SOMBRES volontairement (managed-container
   type 1), on rétablit les tokens "pour fond sombre" et on laisse le color
   d'origine s'appliquer par cascade. */
.section-container-surface.managed-container-surface-type-1,
.managed-container-surface.managed-container-surface-type-1 {
    --text: #f5efe5;
    --muted: #dfd1be;
    --ink-soft: #dfd1be;
    --panel: rgba(31, 24, 19, 0.9);
    --panel-strong: rgba(21, 17, 14, 0.97);
    --line: rgba(208, 169, 109, 0.2);
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.35);
}

/* Et on re-laisse hériter pour les enfants pour ne pas qu'ils soient frappés
   par mes overrides ciblant .product-purchase-card etc. */
.managed-container-surface-type-1 :where(p, h1, h2, h3, h4, h5, h6, span, strong, em, li, label) {
    color: inherit;
}

/* Renforcement explicite (compat ancienne règle) */
.detail-panel p,
.detail-panel li,
.detail-panel strong,
.detail-panel span,
.detail-panel small,
.account-identity-card p,
.account-identity-card span:not(.eyebrow):not(.account-status-pill),
.account-identity-card strong,
.account-identity-card .account-contact-line,
.account-identity-card .account-contact-line span,
.account-identity-card .account-identity-copy h1,
.account-identity-card label,
.account-identity-card .account-editor-toggle-label,
.account-identity-card .account-form-section h3,
.account-identity-card .account-avatar-assist,
.account-identity-card .account-avatar-assist p,
.account-security-panel p,
.account-security-panel li,
.account-security-panel strong,
.account-security-panel span:not(.account-status-pill),
.account-meta,
.account-meta > span,
.manifesto-home-copy p,
.manifesto-card p,
.archive-cta-panel p,
.cart-card p,
.summary-card p {
    color: #251a13; /* em-ink-700 */
}

/* "muted" volontaire (sous-titres, hints, footer-notes) sur fond paper :
   on garde le ton secondaire mais lisible. */
.detail-panel .form-help,
.detail-panel .help-text,
.detail-panel .account-section-subtitle,
.account-identity-card .help-text,
.account-security-panel .help-text,
.cart-drawer-summary-note,
.archive-cta-note,
.checkout-submit-note {
    color: #5a4737; /* em-ink-300 */
}

/* Eyebrows sur fond paper : doré foncé, jamais le doré clair (contraste 1.6:1) */
.detail-panel .eyebrow,
.account-identity-card .eyebrow,
.account-security-panel .eyebrow,
.manifesto-home-copy .eyebrow,
.manifesto-card .eyebrow,
.archive-cta-panel .eyebrow,
.summary-card .eyebrow,
.checkout-form-panel .eyebrow,
.checkout-summary-panel .eyebrow {
    color: #7a4f23; /* em-amber-900 — ratio ≥7:1 sur paper-50 */
}

/* Liens contextuels dans panneaux clairs */
.detail-panel a:not(.button-primary):not(.button-secondary):not(.button-ghost),
.account-identity-card a:not(.button-primary):not(.button-secondary):not(.button-ghost),
.account-security-panel a:not(.button-primary):not(.button-secondary):not(.button-ghost),
.account-inline-link {
    color: #7a4f23; /* em-amber-900 */
    text-decoration: underline;
    text-decoration-color: rgba(122, 79, 35, 0.4);
    text-underline-offset: 3px;
}

.detail-panel a:hover:not(.button-primary):not(.button-secondary):not(.button-ghost),
.account-identity-card a:hover:not(.button-primary):not(.button-secondary):not(.button-ghost),
.account-security-panel a:hover:not(.button-primary):not(.button-secondary):not(.button-ghost),
.account-inline-link:hover {
    text-decoration-color: currentColor;
}

/* Pills d'état (Actif / À configurer / Désactivé) : visibles avec border + bg
   suffisamment contrastés. */
.account-status-pill {
    background: rgba(31, 107, 50, 0.12);
    color: #1f6b32;            /* em-forest-700 sur fond clair → ratio 6:1 */
    border: 1px solid rgba(31, 107, 50, 0.35);
}

.account-status-pill-muted {
    background: rgba(90, 66, 40, 0.08);
    color: #5a4737;            /* em-ink-300 */
    border-color: rgba(90, 66, 40, 0.25);
}

/* ========== 3. Centrage page Mon Compte ========== */
.account-page-container {
    width: min(var(--em-container-max), calc(100% - var(--em-container-padding-x) * 2));
    max-width: var(--em-container-max);
    margin-inline: auto;
    padding-inline: 0;
}

@media (max-width: 640px) {
    .account-page-container {
        width: calc(100% - 1rem);
    }
}

/* ========== 4. Centrage cohérent pour toutes les pages ========== */
/* Les pages compte / conversations / commandes héritent maintenant du même
   plafond que .container global (1260px). */
.checkout-page-container {
    width: min(var(--em-container-max), calc(100% - var(--em-container-padding-x) * 2));
    max-width: var(--em-container-max);
    margin-inline: auto;
}

/* ========== 5. Padding vertical homogène pour les sections de contenu ========== */
.section,
.account-page-section,
.checkout-page-section {
    padding-block: var(--em-section-py);
}

/* Le hero garde son padding-top spécifique (header-offset) */
.hero,
.page-banner {
    padding-bottom: var(--em-section-py);
}

/* ========== 6. Focus visible accessible partout ========== */
:focus-visible {
    outline: 2px solid var(--em-amber-700, #9a5a00);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Boutons et liens "principaux" gardent leur propre focus */
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-ghost:focus-visible {
    outline-offset: 3px;
}