/**
 * Starter Theme - CSS Variables
 *
 * CUSTOMIZE THIS FILE FOR EACH CLIENT
 * All component styles reference these variables
 *
 * To create a new client theme:
 * 1. Copy this file
 * 2. Update the color values to match client's brand
 * 3. Update typography to match client's fonts
 */

:root {
  /* ==========================================
   * BRAND COLORS - Direction B "Terre & Doré" (phase 5/6)
   * ==========================================
   * Palette validated by Paulette 2026-06-04 ("couleurs plus harmonieuses").
   * Source: design/direction-b-terre-dore.html. Brown is the dominant
   * dark (text + primary button), gold is accent-only (eyebrows, links,
   * rules, hovers), warm neutrals (cream / sand) carry the backgrounds.
   */

  /* Primary - Brown chaud (text, primary button, footer) */
  --color-primary: #5c3c30;        /* brun chaud */
  --color-primary-light: #7a5848;  /* brun clair - hover */
  --color-primary-dark: #46291f;

  /* Secondary - Brun doux (secondary text) */
  --color-secondary: #8f7264;      /* brun doux */
  --color-secondary-light: #a98c7d;
  --color-secondary-dark: #6f564a;

  /* Accent - Doré (accent ONLY: eyebrows, links, rules, hovers) */
  --color-accent: #d1bf91;         /* doré mat */
  --color-accent-light: #e0d3ad;
  --color-accent-dark: #9c854f;    /* doré foncé - wordmark, eyebrows */

  /* Success/Warning/Error states */
  --color-success: #5c7a4a;
  --color-warning: #9c854f;
  --color-error: #a23b2e;


  /* ==========================================
   * TEXT COLORS
   * ========================================== */

  --color-text-primary: #5c3c30;      /* Main body text - brun chaud */
  --color-text-secondary: #5c3c30;    /* Headings - brun chaud */
  --color-text-muted: #8f7264;        /* Secondary text - brun doux */
  --color-text-light: #8f7264;        /* Placeholders, hints */
  --color-text-inverse: #FFFFFF;      /* Text on dark backgrounds */


  /* ==========================================
   * BACKGROUND COLORS
   * ========================================== */

  --color-bg-white: #FFFFFF;          /* True white - cards, alt sections */
  --color-bg-light: #f4eee4;          /* Cream chaud - page background + soft sections */
  --color-bg-alt: #ebe0db;            /* Sable - soft fills, separators */
  --color-bg-accent: #f1ecdf;         /* Doré clair - highlighted areas */
  --color-bg-dark: #5c3c30;           /* Brun chaud - footer, dark sections */
  --color-bg-highlight: #f1ecdf;      /* Warning/info boxes */


  /* ==========================================
   * BORDER COLORS
   * ========================================== */

  --color-border: #e3d6c9;            /* Séparateurs chauds */
  --color-border-light: #ebe0d3;
  --color-border-dark: #5c3c30;


  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */

  /* Font Families */
  /* Direction B: ONE font (Jost), nuance by weight only. Loaded via
     @import in main-style.css (Google Fonts, weights 300/400/500/600/700). */
  --font-heading: "Jost", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Jost", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body-light: "Jost", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body-medium: "Jost", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body-bold: "Jost", system-ui, -apple-system, Segoe UI, sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 56px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;


  /* ==========================================
   * SPACING
   * ========================================== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Section spacing */
  --section-padding: 96px;
  --section-padding-mobile: 48px;


  /* ==========================================
   * LAYOUT
   * ========================================== */

  --container-max-width: 1440px;
  --container-padding: 24px;


  /* ==========================================
   * BORDERS & SHADOWS
   * ========================================== */

  --border-radius-sm: 4px;
  --border-radius-md: 4px;   /* Direction B: sober, uniform 4px crispness */
  --border-radius-lg: 8px;
  --border-radius-full: 9999px;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(18, 17, 39, 0.1);


  /* ==========================================
   * TRANSITIONS
   * ========================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;


  /* ==========================================
   * Z-INDEX SCALE
   * ========================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;


  /* ==========================================
   * COMPONENT-LIBRARY TOKEN ALIASES
   * ==========================================
   * The starter component CSS references a short-name token scheme
   * (--space-N, --text-*, --radius-*, --color-text, --color-surface...)
   * that the canonical scale above does not define. Without these aliases
   * every `var(--space-N)` / `var(--text-N)` / `var(--radius-N)` call
   * resolves to undefined, the CSS property becomes invalid and is
   * dropped - which collapses the whole spacing/typography/radii system
   * across the component library. This block bridges the two naming
   * schemes. Until the starter theme is fixed upstream, keep this block
   * in every client theme.
   */

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography scale aliases */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);
  --text-3xl: var(--font-size-3xl);
  --text-4xl: var(--font-size-4xl);

  /* Weights + leading aliases - Direction B tops out at 600 (no heavy bold) */
  --weight-bold: 600;
  --leading-tight: var(--line-height-tight);
  --leading-snug: 1.35;

  /* Heading-font weight variants (fall back to base heading face) */
  --font-heading-light: var(--font-heading);
  --font-heading-medium: var(--font-heading);

  /* Radius aliases */
  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius-md);
  --radius-full: var(--border-radius-full);
  --border-radius: var(--border-radius-md);
  --border-radius-pill: var(--border-radius-full);

  /* Color aliases used by components */
  --color-text: var(--color-text-primary);
  --color-surface: var(--color-bg-white);
  --color-white: #ffffff;
  --color-bg: var(--color-bg-light);
  --color-bg-medium: var(--color-bg-alt);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --primary-color: var(--color-primary);

  /* Button + card defaults */
  --btn-height: 44px;
  --btn-padding-x: var(--space-6);
  --btn-padding-y: var(--space-3);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-md);

  /* Section + grid defaults */
  --section-padding-sm: 48px;
  --section-padding-lg: 96px;
  --grid-gap-lg: 32px;
}


/* ==========================================
 * DARK MODE (optional - uncomment to enable)
 * ========================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #FFFFFF;
    --color-bg-white: #1A1A2E;
    --color-bg-light: #16213E;
    --color-bg-alt: #0F3460;
  }
}
*/