/*
 * Courtside — design tokens
 *
 * À coller dans `system.site.theme` du CMS (admin → settings → theme).
 * Toutes les valeurs sont issues de l'analyse de la maquette Base44 et
 * peuvent être ajustées finement après prise de mesure pixel-perfect.
 */

:root {
    /* =========================================================
     * Palette de marque
     * ========================================================= */

    /* Orange terracotta — ambiance, sections, items actifs, hover */
    --brand-orange-50:  #fbf0e7;
    --brand-orange-100: #f1d4be;
    --brand-orange-200: #e6b08a;
    --brand-orange-300: #d4895a;
    --brand-orange-400: #c0683a;
    --brand-orange-500: #a85432;   /* dominante hero, "Vendre ma raquette" hover, items actifs */
    --brand-orange-600: #8e3f24;
    --brand-orange-700: #6e2e19;

    /* Vert lime — CTA primary, accent éditorial */
    --brand-lime-50:  #f4fae0;
    --brand-lime-100: #e7f5b8;
    --brand-lime-200: #d4ed7e;
    --brand-lime-300: #c9e44d;     /* boutons primary, "qu'une petite annonce" */
    --brand-lime-400: #b3cd35;
    --brand-lime-500: #97b020;

    /* Cream ivory — fonds bas de page, surfaces secondaires */
    --brand-cream-50:  #fdf9f1;
    --brand-cream-100: #f6efe2;    /* fond de page bas, cards "Filtres" */
    --brand-cream-200: #ece1cc;

    /* Bruns — textes, fonds sombres */
    --brand-ink-900: #1a1108;       /* titres */
    --brand-ink-700: #3a2a1c;       /* texte fort */
    --brand-ink-500: #6b5642;       /* texte courant */
    --brand-ink-300: #a89683;       /* texte mute */
    --brand-ink-100: #ddd1c0;

    /* =========================================================
     * Tokens Grade qualité (Ace / Break / Coup droit)
     * ========================================================= */

    --grade-ace-bg:        #d8f1e0;
    --grade-ace-fg:        #16a34a;
    --grade-ace-border:    #16a34a;

    --grade-break-bg:      #fde2d4;
    --grade-break-fg:      #dc6024;
    --grade-break-border:  #dc6024;

    --grade-coup-droit-bg: #ece1cc;
    --grade-coup-droit-fg: #8b6f4a;
    --grade-coup-droit-border: #8b6f4a;

    /* =========================================================
     * Variables globales du design system Socle
     * (Consommées par les blocs hub-* via var(--xxx, fallback).)
     * ========================================================= */

    --primary:          var(--brand-orange-500);
    --text-on-primary:  #ffffff;
    --accent:           var(--brand-lime-300);

    --text-main:        var(--brand-ink-900);
    --text-muted:       var(--brand-ink-500);

    --bg-surface:       #ffffff;
    --bg-page:          var(--brand-cream-100);
    --bg-page-alt:      #ffffff;

    --border-subtle:    #ebe1d0;
    --border-strong:    var(--brand-ink-300);

    /* Animations partagées */
    --duration: 320ms;
    --ease:     cubic-bezier(0.22, 1, 0.36, 1); /* out-expo */

    /* Rayons */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(26, 17, 8, 0.06);
    --shadow-md: 0 4px 16px rgba(26, 17, 8, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 17, 8, 0.12);

    /* =========================================================
     * Typographie
     * ========================================================= */

    /* Titres : serif éditorial gras (Recoleta, Canela, PP Editorial New, ou
       en fallback un système serif). Charger la font via @font-face dans
       le head Delivery (system.site.host head injection). */
    --font-display: "Recoleta", "PP Editorial New", "Canela", Georgia, serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --title-tracking: -0.02em;
    --title-weight:   700;

    /* =========================================================
     * Surcharges spécifiques de blocs hub-*
     * (Pour aligner les blocs partagés sur l'identité Courtside
     * sans dupliquer le bloc.)
     * ========================================================= */

    /* base-button — variante "primary" rendue lime sur fond sombre par défaut */
    --btn-radius: 12px;
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.4rem;
    --btn-font-size: 0.95rem;

    /* hub-card */
    --card-radius: var(--radius-lg);
    --card-padding: 1.5rem;
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);

    /* hub-hero-section */
    --hero-padding-y: 5rem;
    --hero-eyebrow-color: var(--brand-lime-300);

    /* hub-accordion */
    --acc-radius: var(--radius-md);
    --acc-radius-sm: 8px;

    /* base-footer */
    --footer-bg: var(--brand-orange-500);
    --footer-fg: #ffffff;
    --footer-muted: rgba(255, 255, 255, 0.7);
    --footer-accent: var(--brand-lime-300);
    --footer-padding-y: 4rem;

    /* base-sidenav (espace utilisateur) */
    --sn-bg: transparent;
    --sn-border: var(--border-subtle);
    --sni-active-bg: var(--brand-orange-500);
    --sni-fg: var(--brand-ink-900);
    --sni-radius: var(--radius-md);

    /* base-badge — gradeable via base-checkbox-with-badge */
    --badge-radius: 999px;
    --badge-padding: 0.2rem 0.7rem;
    --badge-font-weight: 600;
    --badge-font-size: 0.8rem;

    /* hub-input-* / base-select / hub-textarea */
    --inp-radius: var(--radius-md);
    --inp-border: var(--border-subtle);
    --inp-border-focus: var(--brand-orange-500);
    --sel-radius: var(--radius-md);
    --sel-border: var(--border-subtle);
    --sel-border-focus: var(--brand-orange-500);
    --ta-radius: var(--radius-md);

    /* base-switch */
    --sw-bg-on: var(--brand-orange-500);
}

/* =========================================================
 * Reset / base — appliqué sur la page Delivery
 * ========================================================= */

html, body {
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--bg-page);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: var(--title-tracking);
    font-weight: var(--title-weight);
}

@media (prefers-reduced-motion: reduce) {
    :root { --duration: 0ms; }
}

/* =========================================================
 * Snippet-level utilities (header/footer)
 * ========================================================= */

.cs-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.cs-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    background: var(--brand-orange-500);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0;
    font-family: var(--font-body);
    flex-shrink: 0;
}
.cs-logo-word {
    font-size: 1.05rem;
    line-height: 1;
}

.cs-footer-socials {
    display: inline-flex;
    gap: 1rem;
    margin-left: auto;
    align-items: center;
}
.cs-footer-socials a {
    color: var(--footer-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color var(--duration) var(--ease);
}
.cs-footer-socials a:hover {
    color: var(--footer-fg);
}

/* Footer columns — render base-footer's main slot as a 4-column grid */
base-footer::part(main) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
}
base-footer a {
    text-decoration: none;
}
base-footer [slot="legal"] a {
    color: var(--footer-muted);
}
base-footer [slot="legal"] a:hover {
    color: var(--footer-fg);
}

/* Italic accents in slotted content — ::slotted() can't reach descendants of
   slotted elements, so styles for inline <em>/<i> live at page level. */
base-hero-marketing [slot="title"] em,
base-hero-marketing [slot="title"] i {
    font-style: italic;
    color: var(--brand-lime-300);
    font-weight: 700;
}
base-hero-marketing [slot="lead"] em,
base-hero-marketing [slot="lead"] i {
    font-style: italic;
    color: var(--brand-lime-300);
    font-weight: 600;
}

/* Feature strip — accent the inline icons */
base-feature-strip > * svg {
    color: var(--brand-orange-500);
}
@media (max-width: 880px) {
    base-footer::part(main) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    base-footer::part(main) {
        grid-template-columns: 1fr;
    }
}

/* Footer copyright/legal — give socials breathing space, push them right */
base-footer::part(legal) {
    flex: 1;
    justify-content: flex-end;
}