@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");

/* ============================================================================
   BroKanteur — Design tokens (SOURCE DE VÉRITÉ UNIQUE)
   ==========================================================================
   Boutique de décoration premium, chaleureuse — ancrage breton.

   Source unique pour tous les styles du site (racine + legal/ + blog/ + SSR).
   NE PAS créer de fichier de tokens concurrent. Toute nouvelle variable de
   design doit vivre ici.

   Historique :
   - Fusion 2026-08-24 : promu comme source unique (voir docs/design-audit.md).
     Absorbe l'échelle --space-* / --radius-* de design-system/variables.css
     (qui est désormais obsolète, à supprimer une fois la migration terminée).
     CTA de marque = #0F3F2F, accent secondaire = #5C8A6A.

   Compat SSR : app/services/ssr_templates.py doit `<link>` ce fichier
   au lieu de dupliquer les valeurs en inline. Voir étape 3 du chantier.
   ========================================================================== */

:root {
  /* ── FONDS ────────────────────────────────────────────────────────────── */
  --bk-bg: #F5F1E8;             /* beige page — fond principal unique */
  --bk-bg-alt: #F5F1E8;         /* alias historique, même fond */
  --bk-surface: #FFFDF8;        /* cartes, panneaux, cream */
  --bk-surface-2: #FBF7EF;      /* surface secondaire (variante ivoire) */
  --bk-img-bg: #EFE9DB;         /* cadres photo produit */

  /* ── ENCRES ───────────────────────────────────────────────────────────── */
  --bk-ink: #1F2A22;            /* texte principal (charte 2026) */
  --bk-ink-2: #3F382E;          /* texte courant (variante brun) */
  --bk-ink-soft: #6B6558;       /* texte secondaire gris-brun */
  --bk-muted: #8A7F70;          /* libellés, meta */
  --bk-faint: #BCB1A0;          /* désactivé, placeholders */

  /* ── BORDURES ─────────────────────────────────────────────────────────── */
  --bk-border: #D8D0BE;         /* bordure standard (charte 2026) */
  --bk-border-soft: #E4DAC8;    /* bordure douce (legacy) */
  --bk-border-hair: #EDE5D6;    /* séparateurs fins */
  --bk-line: var(--bk-border);  /* alias legacy */

  /* ── VERTS DE MARQUE ──────────────────────────────────────────────────── */
  --bk-green: #0F3F2F;          /* CTA principal, contraste fort sur beige */
  --bk-green-hover: #175641;    /* hover CTA */
  --bk-green-light: #5C8A6A;    /* accent sauge secondaire, jamais pour petit texte */
  --bk-green-pale: #EAF2ED;     /* fond badges succès (inchangé) */
  --bk-green-tint: #F1F7F3;     /* fond très clair (banners, hints) */
  --bk-green-deep: #0F3F2F;     /* dashboard sombre, admin, PWA theme-color */
  --bk-green-deep-hover: #175641;

  /* Aliases legacy (à remplacer progressivement — voir étape 4) */
  --bk-green-2: var(--bk-green-hover);
  --bk-green-brand: var(--bk-green-deep-hover);

  /* ── ACCENTS ──────────────────────────────────────────────────────────── */
  --bk-terracotta: #B46647;     /* repère actif de la carte agenda */
  --bk-terracotta-text: #914A32; /* petits libellés sur fond ivoire */
  --bk-gold: #E8C87A;           /* accent doré (hero, badges premium) */
  --bk-gold-deep: #B8975A;      /* variante texte */

  /* ── SÉMANTIQUE ───────────────────────────────────────────────────────── */
  --bk-danger: #B42318;
  --bk-danger-bg: #FBEDEA;
  --bk-warning: #92400E;
  --bk-warning-bg: #FDF6E3;
  --bk-warning-border: #E6C97A;
  --bk-success: #2E5D3F;
  --bk-success-bg: #DDEACF;
  --bk-info: #1E40AF;
  --bk-info-bg: #EFF6FF;

  /* ── CONTRASTE WCAG AA (2026-09-15) ─────────────────────────────────────
     Audit A11y : #5C8A6A (3.52:1) et gris #888/999/AAA échouent AA sur fond
     crème. Tokens dédiés pour texte normal (≥4.5:1) vs composants UI (≥3:1).
     Ratios calculés sur fond crème #F5F1E8. */

  /* Texte */
  --color-text-brand: #3D6B4F;              /* vert texte normal — 5.46:1 sur crème */
  --color-text-brand-soft: #4F775B;         /* alternative texte, 4.52:1 (limite AA) */
  --color-text-secondary: #666666;          /* remplace #999/#AAA — 5.29:1 */
  --color-text-muted: #555555;              /* remplace #888 — 7.20:1 */
  --color-warning-text: #8A4A1E;            /* remplace #C87840 (3.00:1) — 5.29:1 */

  /* Composants (fond bouton, bordure, icône, focus ring) */
  --color-btn-primary-bg: var(--bk-green);  /* alias sur #0F3F2F (8.5:1 avec texte blanc, AAA) */
  --color-brand-ui: var(--bk-green-light);  /* #5C8A6A — bordures, icônes, texte large uniquement */

  /* ── TYPOGRAPHIES ─────────────────────────────────────────────────────── */
  /* Politique typographique : Playfair = marque/titres, DM Sans = interface/corps. */
  --bk-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bk-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --bk-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Noms explicites utilisés par tous les shells (public, client, partenaire, admin). */
  --bk-font-brand: var(--bk-serif);
  --bk-font-heading: var(--bk-serif);
  --bk-font-body: var(--bk-sans);

  /* Aliases legacy */
  --bk-serif-editorial: var(--bk-serif);
  --bk-public-serif: var(--bk-font-brand);

  /* Échelle typographique (design-system/variables.css absorbé) */
  --text-display:   56px;
  --text-h1:        40px;
  --text-h2:        32px;
  --text-h3:        24px;
  --text-h4:        20px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-body-sm:   14px;
  --text-caption:   12px;
  --text-mono:      13px;

  /* ── ESPACEMENT (échelle 4/8 px, absorbée de design-system) ──────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── RAYONS ───────────────────────────────────────────────────────────── */
  --bk-radius-sm: 6px;          /* petits éléments (badges, tags) */
  --bk-radius-md: 8px;          /* champs, boutons */
  --bk-radius-lg: 10px;         /* cartes standards (charte 2026) */
  --bk-radius-xl: 14px;         /* cartes premium, dashboards */
  --bk-radius-2xl: 20px;        /* hero blocks */
  --bk-radius-full: 9999px;     /* pills, avatars */
  /* Aliases legacy */
  --bk-radius: var(--bk-radius-xl);          /* était 14px, préservé */

  /* ── OMBRES ───────────────────────────────────────────────────────────── */
  --bk-shadow-xs: 0 1px 2px rgba(31,42,34,.04);
  --bk-shadow-sm: 0 2px 8px rgba(31,42,34,.06);
  --bk-shadow: 0 1px 2px rgba(46,38,26,.05), 0 8px 22px rgba(46,38,26,.06);
  --bk-shadow-hover: 0 2px 4px rgba(46,38,26,.06), 0 14px 30px rgba(46,38,26,.1);
  --bk-shadow-lg: 0 8px 24px rgba(31,42,34,.12);

  /* ── LAYOUT ───────────────────────────────────────────────────────────── */
  --bk-container: 1240px;       /* container max pages vitrine (index, catalogue) */
  --bk-container-content: 1080px; /* pages contenu long (presentation, blog) */
  --bk-container-form: 720px;   /* formulaires, auth, légal */
  --bk-container-narrow: 640px; /* pages simples (achat, retractation) */
  --bk-btn-h: 44px;             /* zone tactile minimum */

  /* Padding page (aligné sur --space-*) */
  --bk-page-pad: var(--space-6);      /* 24px */
  --bk-page-pad-lg: var(--space-10);  /* 40px */

  /* ── Z-INDEX ──────────────────────────────────────────────────────────── */
  --bk-z-nav: 50;
  --bk-z-tray: 90;              /* barre de comparaison, bottom nav */
  --bk-z-modal: 200;
  --bk-z-overlay: 100;

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --bk-transition-fast: 0.15s ease;
  --bk-transition: 0.2s ease;
}

/* Showroom immersif des fiches produit — palette de la présentation validée. */
.bk-showroom-page {
  --bk-showroom-bg: #e2d7c4;
  --bk-showroom-light: #f0e9dd;
  --bk-showroom-mid: #e4d9c6;
  --bk-showroom-deep: #d1bea3;
  --bk-showroom-header: rgba(245,241,232,.98);
  --bk-showroom-shadow: rgba(53,32,19,.22);
  --bk-showroom-shadow-soft: rgba(53,32,19,.07);
  --bk-showroom-dialog: #f1e8da;
  --bk-showroom-overlay: rgba(40,25,18,.55);
  --bk-ink: #241b16;
  --bk-ink-soft: #2f221b;
  --bk-ink-2: #2f221b;
  --bk-muted: #2f221b;
  --bk-border: rgba(48,31,20,.32);
  --bk-img-bg: transparent;
}