/* =============================================================================
 * SERIGRAPHIE-BOUTIQUE — Design Tokens v0.2.0
 * =============================================================================
 * Source : docs/MOODBOARD-v0.2.0.md (décisions Sprint D1 validées 2026-04-23)
 * Palette : P2 — Encre Noire + Orange Pantone 021
 * Typographie : Inter + IBM Plex Mono
 * Philosophie : restreinte (90% neutres / 8% encre / 2% accent)
 * =============================================================================
 * NE PAS ÉDITER DIRECTEMENT EN PROD — toute modification passe par PR GitHub
 * puis cache-busting via ?v=YYYYMMDD sur l'URL d'import
 * ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
   * COLORS — palette restreinte + sémantiques
   * ------------------------------------------------------------------------- */

  /* Encre (texte principal, structure, logos) */
  --sb-color-ink: #0E0E10;
  --sb-color-ink-soft: #1A1A1E;
  --sb-color-ink-hover: #000000;

  /* Accent — Orange Pantone 021 (CTAs, liens, badges, emphases) */
  --sb-color-accent: #FF5E0E;
  --sb-color-accent-hover: #E04C00;
  --sb-color-accent-darker: #C63D00;
  --sb-color-accent-soft: #FFF5EE;
  --sb-color-accent-tint: #FFDCC7;

  /* Surfaces neutres */
  --sb-color-paper: #FAFAF7;            /* fond principal, pas pur blanc */
  --sb-color-paper-alt: #F0EBE3;        /* sections alternées (Kraft) */
  --sb-color-paper-pure: #FFFFFF;       /* rare — uniquement cartes élevées */

  /* Neutres texte et bordures */
  --sb-color-graphite: #44464A;         /* texte secondaire, labels */
  --sb-color-graphite-soft: #6B6E74;    /* texte tertiaire, hints */
  --sb-color-cendre: #D6D4CF;           /* bordures, dividers, placeholders */
  --sb-color-cendre-soft: #E8E6E1;      /* bordures très légères */

  /* Sémantiques */
  --sb-color-success: #1FAD66;
  --sb-color-success-soft: #E8F6EF;
  --sb-color-warning: #E4A400;
  --sb-color-warning-soft: #FFF7E0;
  --sb-color-danger: #C42B38;
  --sb-color-danger-soft: #FCE8EA;
  --sb-color-info: #2B5A87;
  --sb-color-info-soft: #E8EEF4;

  /* Aliases fonctionnels (pointent vers les tokens ci-dessus) */
  --sb-text-primary: var(--sb-color-ink);
  --sb-text-secondary: var(--sb-color-graphite);
  --sb-text-tertiary: var(--sb-color-graphite-soft);
  --sb-text-on-accent: var(--sb-color-ink);       /* orange clair → texte sombre */
  --sb-text-on-ink: var(--sb-color-paper);        /* encre sombre → texte clair */

  --sb-bg-primary: var(--sb-color-paper);
  --sb-bg-alt: var(--sb-color-paper-alt);
  --sb-bg-inverted: var(--sb-color-ink);
  --sb-bg-accent: var(--sb-color-accent);

  --sb-border-default: var(--sb-color-cendre);
  --sb-border-soft: var(--sb-color-cendre-soft);
  --sb-border-strong: var(--sb-color-graphite);
  --sb-border-accent: var(--sb-color-accent);

  /* ---------------------------------------------------------------------------
   * TYPOGRAPHY
   * ------------------------------------------------------------------------- */

  /* Font families (fallback system-ui = rendu propre si Inter n'a pas chargé) */
  --sb-font-sans:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;

  --sb-font-mono:
    'IBM Plex Mono',
    ui-monospace,
    'SF Mono',
    Menlo,
    Consolas,
    monospace;

  /* Font sizes — échelle ratio 1.25 (quinte musicale) */
  --sb-fs-micro: 11px;         /* mentions légales, TVA */
  --sb-fs-xs: 12px;            /* small, captions */
  --sb-fs-sm: 14px;            /* labels, UI secondaires */
  --sb-fs-base: 16px;          /* body par défaut */
  --sb-fs-md: 18px;            /* H4, lead paragraphs */
  --sb-fs-lg: 20px;            /* H3 */
  --sb-fs-xl: 24px;            /* H3 large, sub-hero */
  --sb-fs-2xl: 32px;           /* H2 */
  --sb-fs-3xl: 44px;           /* H1 desktop */
  --sb-fs-4xl: 56px;           /* hero titles */

  /* Font weights — uniquement 2 poids (cf brief : 400 + 500) */
  --sb-fw-regular: 400;
  --sb-fw-medium: 500;

  /* Line heights */
  --sb-lh-tight: 1.15;         /* H1, H2 */
  --sb-lh-snug: 1.35;          /* H3, H4 */
  --sb-lh-normal: 1.5;         /* body secondaires, UI */
  --sb-lh-relaxed: 1.6;        /* body par défaut */
  --sb-lh-loose: 1.75;         /* textes longs, éditorial */

  /* Letter spacing */
  --sb-ls-tighter: -1px;       /* H1 grand */
  --sb-ls-tight: -0.5px;       /* H1 standard, H2 */
  --sb-ls-normal: 0;
  --sb-ls-wide: 0.5px;
  --sb-ls-wider: 1px;          /* uppercase small */
  --sb-ls-widest: 2px;         /* uppercase tags */

  /* ---------------------------------------------------------------------------
   * SPACING — base 4, échelle cohérente
   * ------------------------------------------------------------------------- */
  --sb-sp-0: 0;
  --sb-sp-1: 4px;
  --sb-sp-2: 8px;
  --sb-sp-3: 12px;
  --sb-sp-4: 16px;
  --sb-sp-5: 20px;
  --sb-sp-6: 24px;
  --sb-sp-8: 32px;
  --sb-sp-10: 40px;
  --sb-sp-12: 48px;
  --sb-sp-16: 64px;
  --sb-sp-20: 80px;
  --sb-sp-24: 96px;

  /* ---------------------------------------------------------------------------
   * BORDER RADIUS
   * ------------------------------------------------------------------------- */
  --sb-radius-none: 0;
  --sb-radius-sm: 3px;         /* boutons, inputs */
  --sb-radius-md: 6px;         /* cards, containers */
  --sb-radius-lg: 8px;         /* blocs majeurs */
  --sb-radius-xl: 12px;        /* hero visuals */
  --sb-radius-pill: 9999px;    /* chips, tags arrondis */

  /* ---------------------------------------------------------------------------
   * SHADOWS — légères, flat (jamais de drop shadows lourdes)
   * ------------------------------------------------------------------------- */
  --sb-shadow-none: none;
  --sb-shadow-xs: 0 1px 2px rgba(14, 14, 16, 0.04);
  --sb-shadow-sm: 0 2px 4px rgba(14, 14, 16, 0.06);
  --sb-shadow-md: 0 4px 8px rgba(14, 14, 16, 0.08);
  --sb-shadow-lg: 0 8px 16px rgba(14, 14, 16, 0.10);

  /* Focus ring (accessibilité clavier) */
  --sb-shadow-focus: 0 0 0 3px rgba(255, 94, 14, 0.3);

  /* ---------------------------------------------------------------------------
   * MOTION — micro-interactions uniquement, jamais de gros mouvements
   * ------------------------------------------------------------------------- */
  --sb-duration-instant: 0ms;
  --sb-duration-fast: 150ms;
  --sb-duration-normal: 250ms;
  --sb-duration-slow: 400ms;

  --sb-ease-out: cubic-bezier(0.2, 0.8, 0.4, 1);
  --sb-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --sb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------------------------
   * BREAKPOINTS — utilisés dans les media queries (référence uniquement —
   * CSS variables ne fonctionnent pas dans les @media, mais on les documente
   * ici pour cohérence JS/CSS)
   * ------------------------------------------------------------------------- */
  --sb-bp-sm: 640px;           /* grand mobile / petit tablet */
  --sb-bp-md: 768px;           /* tablet portrait */
  --sb-bp-lg: 1024px;          /* tablet landscape / petit desktop */
  --sb-bp-xl: 1280px;          /* desktop standard */
  --sb-bp-2xl: 1536px;         /* large desktop */

  /* ---------------------------------------------------------------------------
   * Z-INDEX — couches empilées, pas de z-index:9999 ailleurs
   * ------------------------------------------------------------------------- */
  --sb-z-base: 0;
  --sb-z-raised: 10;
  --sb-z-sticky: 100;          /* header sticky */
  --sb-z-dropdown: 200;        /* menus, search suggestions */
  --sb-z-overlay: 300;         /* backdrops */
  --sb-z-modal: 400;           /* modals, drawers */
  --sb-z-toast: 500;           /* notifications */
  --sb-z-tooltip: 600;         /* tooltips */

  /* ---------------------------------------------------------------------------
   * HALFTONE — le motif signature sérigraphique
   * (détails complets dans src/css/halftone.css)
   * ------------------------------------------------------------------------- */
  --sb-halftone-dot-size: 2px;
  --sb-halftone-grid-size: 12px;
  --sb-halftone-opacity-subtle: 0.04;
  --sb-halftone-opacity-default: 0.08;
  --sb-halftone-opacity-strong: 0.4;

  /* ---------------------------------------------------------------------------
   * LAYOUT CONSTANTS
   * ------------------------------------------------------------------------- */
  --sb-container-max-width: 1280px;
  --sb-container-padding: var(--sb-sp-6);   /* 24px desktop, réduit sur mobile via media */
  --sb-header-height: 72px;
  --sb-topbar-height: 32px;
}

/* Reset subtil & bonnes bases — on ne casse pas le template ePages mais on
 * impose des valeurs raisonnables partout où on peut */
.sb-scope,
.sb-scope * {
  box-sizing: border-box;
}

.sb-scope {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-relaxed);
  color: var(--sb-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Breakpoint mobile padding */
@media (max-width: 767px) {
  :root {
    --sb-container-padding: var(--sb-sp-4);
  }
}