/* ==========================================================================
   Peerly Draw — Material 3 Design Tokens
   ==========================================================================
   Tous les tokens suivent les spécifications Material 3 :
   - Grille 8dp (4dp pour ajustements fins)
   - Échelle de formes M3 (7 paliers)
   - Échelle typographique M3 (15 styles, Roboto)
   - Rôles de couleurs sémantiques M3 (26 rôles)
   - Élévation M3 (6 niveaux)
   - Motion M3 (durées + easings)
   ========================================================================== */

:root {
  /* ========================================================================
     SPACING — Grille 8dp
     ======================================================================== */
  --md-sys-spacing-0: 0;
  --md-sys-spacing-1: 8px;
  --md-sys-spacing-2: 16px;
  --md-sys-spacing-3: 24px;
  --md-sys-spacing-4: 32px;
  --md-sys-spacing-5: 40px;
  --md-sys-spacing-6: 48px;
  --md-sys-spacing-7: 56px;
  --md-sys-spacing-8: 64px;
  --md-sys-spacing-9: 72px;
  --md-sys-spacing-10: 80px;

  /* Ajustements fins 4dp */
  --md-sys-spacing-half: 4px;
  --md-sys-spacing-1half: 12px;
  --md-sys-spacing-2half: 20px;
  --md-sys-spacing-3half: 28px;

  /* Page padding responsive */
  --md-sys-page-padding: var(--md-sys-spacing-2); /* 16dp mobile */

  /* ========================================================================
     SHAPE — 7 paliers M3
     ======================================================================== */
  --md-sys-shape-none: 0;
  --md-sys-shape-xs: 4px;
  --md-sys-shape-sm: 8px;
  --md-sys-shape-md: 12px;
  --md-sys-shape-lg: 16px;
  --md-sys-shape-xl: 28px;
  --md-sys-shape-full: 9999px;

  /* ========================================================================
     TYPOGRAPHY — Échelle M3 (Roboto)
     ======================================================================== */
  --md-sys-typescale-font: 'Roboto', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-mono: 'Roboto Mono', ui-monospace, monospace;

  /* Display */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line: 64px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;

  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line: 52px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-tracking: 0;

  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line: 44px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-tracking: 0;

  /* Headline */
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line: 40px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0;

  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line: 36px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-tracking: 0;

  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line: 32px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-tracking: 0;

  /* Title */
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line: 28px;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-tracking: 0;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line: 24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line: 20px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-tracking: 0.1px;

  /* Body */
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line: 24px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;

  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line: 20px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: 0.25px;

  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line: 16px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-tracking: 0.4px;

  /* Label */
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line: 20px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;

  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line: 16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line: 16px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: 0.5px;

  /* ========================================================================
     ELEVATION — 6 niveaux M3
     ======================================================================== */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3);

  /* ========================================================================
     MOTION — Durées et easings M3
     ======================================================================== */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;

  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* ========================================================================
     STATE LAYER — Opacités M3
     ======================================================================== */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;

  /* ========================================================================
     COLOR — Light theme (par défaut)
     ======================================================================== */
  /* Primary */
  --md-sys-color-primary: #8B5000;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDCC0;
  --md-sys-color-on-primary-container: #2C1600;

  /* Secondary */
  --md-sys-color-secondary: #6F5B40;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FBDFBF;
  --md-sys-color-on-secondary-container: #271904;

  /* Tertiary */
  --md-sys-color-tertiary: #4C6544;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #CDEBC0;
  --md-sys-color-on-tertiary-container: #0A1F06;

  /* Error */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* Success (extension custom) */
  --md-sys-color-success: #1B6B3A;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #B7F2C5;
  --md-sys-color-on-success-container: #00210C;

  /* Surface & background */
  --md-sys-color-surface: #FFF8F4;
  --md-sys-color-surface-dim: #E3D8D1;
  --md-sys-color-surface-bright: #FFF8F4;
  --md-sys-color-on-surface: #211A16;
  --md-sys-color-on-surface-variant: #51443C;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FDF2EB;
  --md-sys-color-surface-container: #F7ECE5;
  --md-sys-color-surface-container-high: #F1E6DF;
  --md-sys-color-surface-container-highest: #EBE1DA;

  /* Outline */
  --md-sys-color-outline: #83746C;
  --md-sys-color-outline-variant: #D5C3B9;

  /* Inverse */
  --md-sys-color-inverse-surface: #372F2A;
  --md-sys-color-inverse-on-surface: #FCEEE7;
  --md-sys-color-inverse-primary: #FFB77B;

  /* Scrim */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* ==========================================================================
   COLOR — Dark theme
   ==========================================================================
   Le dark mode M3 n'est pas une inversion du light. On utilise des surfaces
   profondes (#0F1014, #15161A, #1B1C20) et une hiérarchie par contraste de
   surface plutôt que par ombre.
   ========================================================================== */
[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #FFB77B;
  --md-sys-color-on-primary: #4A2800;
  --md-sys-color-primary-container: #6A3C00;
  --md-sys-color-on-primary-container: #FFDCC0;

  /* Secondary */
  --md-sys-color-secondary: #DEC2A3;
  --md-sys-color-on-secondary: #3E2E14;
  --md-sys-color-secondary-container: #564427;
  --md-sys-color-on-secondary-container: #FBDFBF;

  /* Tertiary */
  --md-sys-color-tertiary: #B2CFA5;
  --md-sys-color-on-tertiary: #1E3718;
  --md-sys-color-tertiary-container: #354E2E;
  --md-sys-color-on-tertiary-container: #CDEBC0;

  /* Error */
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;

  /* Success */
  --md-sys-color-success: #9CD6A8;
  --md-sys-color-on-success: #00391A;
  --md-sys-color-success-container: #00522A;
  --md-sys-color-on-success-container: #B7F2C5;

  /* Surface & background */
  --md-sys-color-surface: #15161A;
  --md-sys-color-surface-dim: #0F1014;
  --md-sys-color-surface-bright: #3B3C40;
  --md-sys-color-on-surface: #E5E1E6;
  --md-sys-color-on-surface-variant: #C9C5CA;
  --md-sys-color-surface-container-lowest: #0F1014;
  --md-sys-color-surface-container-low: #1B1C20;
  --md-sys-color-surface-container: #1F2024;
  --md-sys-color-surface-container-high: #292A2E;
  --md-sys-color-surface-container-highest: #343539;

  /* Outline */
  --md-sys-color-outline: #938F94;
  --md-sys-color-outline-variant: #47464B;

  /* Inverse */
  --md-sys-color-inverse-surface: #E5E1E6;
  --md-sys-color-inverse-on-surface: #303034;
  --md-sys-color-inverse-primary: #8B5000;

  /* Scrim */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}