/** * BreakDay — Design tokens unifiés (charte graphique v2.2). * Source de vérité unique. Consommé par le thème et (à terme) le plugin. */ @font-face { font-family: 'Inter'; src: url('../../fonts/Inter.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* Accent BreakDay */ --bd-y: #FFCC00; --bd-yl: #FFD60A; --bd-yd: #B8860B; --bd-ydh: #9A7209; --bd-yd-a11y: #795700; --bd-y-soft: #FFF6CC; /* Neutres */ --bd-white: #FFFFFF; --bd-owhite: #FBFBFD; --bd-lgray: #F5F5F7; --bd-border: #D2D2D7; --bd-border-strong: rgba(0, 0, 0, 0.15); --bd-mgray: #86868B; --bd-mgray-a11y: #6E6E73; --bd-dark: #1D1D1F; --bd-black: #000000; /* Sémantiques */ --bd-ok: #34C759; --bd-ok-text: #1B6E36; --bd-err: #FF3B30; --bd-err-text: #C5221B; --bd-warn: #FF9500; --bd-warn-text: #B26900; --bd-warn-text-a11y: #8A5900; /* Teintes sémantiques douces — fonds d'alertes/notices */ --bd-ok-soft: rgba(52, 199, 89, 0.15); --bd-err-soft: rgba(255, 59, 48, 0.15); --bd-warn-soft: rgba(255, 149, 0, 0.15); --bd-info: #3B82F6; --bd-info-text: #1D4ED8; --bd-info-soft: rgba(59, 130, 246, 0.15); /* Typographie */ --bd-font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Échelle typo — font-size / line-height / letter-spacing / weight */ --bd-fs-hero: 96px; --bd-lh-hero: 1.05; --bd-ls-hero: -0.04em; --bd-fw-hero: 600; --bd-fs-dl: 56px; --bd-lh-dl: 1.07; --bd-ls-dl: -0.025em; --bd-fw-dl: 600; --bd-fs-dm: 48px; --bd-lh-dm: 1.08; --bd-ls-dm: -0.022em; --bd-fw-dm: 600; --bd-fs-ds: 40px; --bd-lh-ds: 1.1; --bd-ls-ds: -0.02em; --bd-fw-ds: 600; --bd-fs-hl: 32px; --bd-lh-hl: 1.15; --bd-ls-hl: -0.015em; --bd-fw-hl: 600; --bd-fs-t1: 28px; --bd-lh-t1: 1.2; --bd-ls-t1: -0.012em; --bd-fw-t1: 500; --bd-fs-t2: 21px; --bd-lh-t2: 1.25; --bd-ls-t2: -0.01em; --bd-fw-t2: 500; --bd-fs-bl: 19px; --bd-lh-bl: 1.42; --bd-ls-bl: 0.012em; --bd-fw-bl: 400; --bd-fs-b: 17px; --bd-lh-b: 1.47; --bd-ls-b: -0.022em; --bd-fw-b: 400; --bd-fs-bs: 14px; --bd-lh-bs: 1.4; --bd-ls-bs: -0.016em; --bd-fw-bs: 400; --bd-fs-cap: 12px; --bd-lh-cap: 1.33; --bd-ls-cap: -0.012em; --bd-fw-cap: 400; --bd-fs-eye: 12px; --bd-lh-eye: 1.2; --bd-ls-eye: 0; --bd-fw-eye: 600; /* Rayons */ --bd-r-pill: 980px; --bd-r-lg: 28px; --bd-r-card: 18px; --bd-r-input: 12px; --bd-r-sm: 8px; /* Ombres */ --bd-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04); --bd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); /* Focus */ --bd-focus-ring: 0 0 0 4px rgba(255, 204, 0, 0.25); /* Overlays neutres — états hover et bordures sur fond sombre */ --bd-hover-light: rgba(0, 0, 0, 0.04); --bd-hover-dark: rgba(255, 255, 255, 0.08); --bd-line-on-dark: rgba(255, 255, 255, 0.5); --bd-line-on-dark-strong: rgba(255, 255, 255, 0.9); --bd-line-on-dark-muted: rgba(255, 255, 255, 0.4); /* Z-index */ --bd-z-dropdown: 100; --bd-z-sticky: 200; --bd-z-fixed: 300; --bd-z-modal-backdrop: 400; --bd-z-modal: 500; --bd-z-tooltip: 600; --bd-z-toast: 700; /* Alias sémantiques du design system (rétrocompatibles avec les tokens historiques). */ --bd-surface-page: var(--bd-owhite); --bd-surface-subtle: var(--bd-lgray); --bd-text-primary: var(--bd-dark); --bd-text-secondary: var(--bd-mgray-a11y); --bd-border-control: var(--bd-border); --bd-stack-sm: 8px; --bd-stack-md: 16px; --bd-stack-lg: 24px; /* Échelle d'espacement historique, encore consommée par les fiches produit WooCommerce et les pages marketing. */ --bd-stack-2xs: 4px; --bd-stack-xs: 6px; --bd-stack-xl: 32px; --bd-stack-2xl: 48px; --bd-stack-3xl: 64px; --bd-stack-4xl: 80px; --bd-stack-6xl: 112px; --bd-stack-7xl: 128px; --bd-section-space: 96px; --bd-page-gutter: clamp(20px, 4vw, 48px); --bd-content-max: 1440px; --bd-content-narrow: 720px; --bd-nav-height: 80px; /* Alias de composants et de mouvement pour les feuilles historiques. */ --bd-r-control: 12px; --bd-r-card-compact: 12px; --bd-r-md: 16px; --bd-r-xl: 32px; --bd-border-subtle: #E5E5EA; --bd-cream: #FFF9E6; --bd-y-dark: var(--bd-yd); --bd-color-primary: var(--bd-dark); --bd-color-text-muted: var(--bd-mgray-a11y); --bd-text-on-inverse: var(--bd-white); --bd-text-on-inverse-muted: rgba(255, 255, 255, .72); --bd-fs-lead: var(--bd-fs-bl); --bd-lh-lead: var(--bd-lh-bl); --bd-fs-nav: 14px; --bd-fw-nav: 600; --bd-fw-medium: 500; --bd-ls-label: .08em; --bd-hero-gradient: linear-gradient(135deg, var(--bd-y) 0%, var(--bd-yl) 100%); --bd-motion-fast: 120ms; --bd-motion-base: 200ms; --bd-ease-standard: cubic-bezier(.2, .8, .2, 1); --bd-color-page: var(--bd-surface-page); --bd-color-surface: var(--bd-white); --bd-color-surface-subtle: var(--bd-surface-subtle); --bd-color-text-primary: var(--bd-text-primary); --bd-color-text-secondary: var(--bd-text-secondary); --bd-color-border: var(--bd-border-control); --bd-color-action: var(--bd-y); --bd-color-action-hover: var(--bd-yd); --bd-color-danger: var(--bd-err); --bd-color-warning: var(--bd-warn); --bd-color-success: var(--bd-ok); --bd-color-info: var(--bd-info); --bd-color-success-text: var(--bd-ok-text); --bd-color-warning-text: var(--bd-warn-text-a11y); --bd-color-danger-text: var(--bd-err-text); --bd-color-info-text: var(--bd-info-text); --bd-space-sm: var(--bd-stack-sm); --bd-space-md: var(--bd-stack-md); --bd-space-lg: var(--bd-stack-lg); /* Hauteurs de contrôle partagées. Les modificateurs .bd-btn--sm et .bd-btn--lg les consomment via base.css : ils doivent donc rester définis avec la taille standard pour préserver l'alignement des CTA. */ --bd-button-height-sm: 36px; --bd-button-height-md: 44px; --bd-button-height-lg: 52px; --height-btn: var(--bd-button-height-md); --bd-shadow-card-hover: var(--bd-shadow-lg); } /* Tailles responsives — charte § media 768px */ @media (max-width: 768px) { :root { --bd-fs-hero: 44px; --bd-fs-dl: 34px; --bd-fs-dm: 28px; --bd-fs-ds: 26px; } }