/*
 * 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);

    /* CTA primary = lime (the orange brand color is used for backgrounds /
       hover, not for buttons). Hero bg etc. use --brand-orange-* directly. */
    --btn-primary-bg:     var(--brand-lime-300);
    --btn-primary-fg:     var(--brand-ink-900);
    --btn-primary-border: transparent;

    /* 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 {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--bg-page);
}
body { min-height: 100vh; }

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; }
}