/*
 * Material Design 3 — Design Tokens
 * COLIBRI — Teal primary scheme
 * Generated from M3 Color Builder / md.io
 * https://m3.material.io/styles/color/system/overview
 */

:root {

  /* ================================================================
   * COLOR SCHEME — Light theme
   * Primary seed: #26B99A (brand teal)
   * ================================================================ */

  /* Primary */
  --md-sys-color-primary:              #006A5E;
  --md-sys-color-on-primary:           #FFFFFF;
  --md-sys-color-primary-container:    #74F8E5;
  --md-sys-color-on-primary-container: #00201C;

  /* Primary Fixed */
  --md-sys-color-primary-fixed:            #74F8E5;
  --md-sys-color-primary-fixed-dim:        #51DBCA;
  --md-sys-color-on-primary-fixed:         #00201C;
  --md-sys-color-on-primary-fixed-variant: #004E45;

  /* Secondary */
  --md-sys-color-secondary:              #4A6360;
  --md-sys-color-on-secondary:           #FFFFFF;
  --md-sys-color-secondary-container:    #CCE8E4;
  --md-sys-color-on-secondary-container: #051F1D;

  /* Secondary Fixed */
  --md-sys-color-secondary-fixed:            #CCE8E4;
  --md-sys-color-secondary-fixed-dim:        #B0CCCA;
  --md-sys-color-on-secondary-fixed:         #051F1D;
  --md-sys-color-on-secondary-fixed-variant: #324B49;

  /* Tertiary */
  --md-sys-color-tertiary:              #456179;
  --md-sys-color-on-tertiary:           #FFFFFF;
  --md-sys-color-tertiary-container:    #CBE5FF;
  --md-sys-color-on-tertiary-container: #001E30;

  /* 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;

  /* Warning (custom, hors spec M3 standard) */
  --md-sys-color-warning:              #7D5700;
  --md-sys-color-on-warning:           #FFFFFF;
  --md-sys-color-warning-container:    #FFDEA9;
  --md-sys-color-on-warning-container: #271900;

  /* Surface */
  --md-sys-color-surface:                   #F4FBF9;
  --md-sys-color-on-surface:                #161D1C;
  --md-sys-color-surface-variant:           #DAE5E2;
  --md-sys-color-on-surface-variant:        #3F4947;
  --md-sys-color-surface-inverse:           #2B3231;
  --md-sys-color-on-surface-inverse:        #EBF2F0;
  --md-sys-color-surface-tint:              #006A5E;
  --md-sys-color-surface-container-lowest:  #FFFFFF;
  --md-sys-color-surface-container-low:     #EEF5F3;
  --md-sys-color-surface-container:         #E8EFED;
  --md-sys-color-surface-container-high:    #E3E9E7;
  --md-sys-color-surface-container-highest: #DDE4E2;

  /* Background */
  --md-sys-color-background:    #F4FBF9;
  --md-sys-color-on-background: #161D1C;

  /* Outline */
  --md-sys-color-outline:         #6F7977;
  --md-sys-color-outline-variant: #BEC9C7;

  /* Scrim */
  --md-sys-color-scrim: rgba(0, 0, 0, 0.32);


  /* ================================================================
   * ELEVATION
   * M3 : shadow + tonal color overlay (surface-tint at % opacity)
   * ================================================================ */

  --md-sys-elevation-level0-shadow: none;
  --md-sys-elevation-level1-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3-shadow:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level4-shadow:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level5-shadow:
    0px 8px 12px 6px rgba(0, 0, 0, 0.15),
    0px 4px 4px rgba(0, 0, 0, 0.3);

  /* Tonal overlay opacity per level */
  --md-sys-elevation-level0-tint: 0%;
  --md-sys-elevation-level1-tint: 5%;
  --md-sys-elevation-level2-tint: 8%;
  --md-sys-elevation-level3-tint: 11%;
  --md-sys-elevation-level4-tint: 12%;
  --md-sys-elevation-level5-tint: 14%;


  /* ================================================================
   * SHAPE
   * ================================================================ */

  --md-sys-shape-none:        0px;
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-small:       8px;
  --md-sys-shape-medium:      12px;
  --md-sys-shape-large:       16px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-shape-full:        9999px;


  /* ================================================================
   * TYPOGRAPHY — M3 Type Scale
   * ================================================================ */

  --md-sys-typescale-font:  'Roboto', system-ui, -apple-system, sans-serif;

  /* 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: 0px;

  --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: 0px;

  /* 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-medium-size:     28px;
  --md-sys-typescale-headline-medium-line:     36px;
  --md-sys-typescale-headline-medium-weight:   400;

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

  /* 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-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;


  /* ================================================================
   * MOTION
   * ================================================================ */

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

  --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-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1:   450ms;
  --md-sys-motion-duration-long2:   500ms;


  /* ================================================================
   * STATE LAYERS — opacity values (applied on currentColor)
   * ================================================================ */

  --md-sys-state-hover-opacity:    0.08;
  --md-sys-state-focus-opacity:    0.12;
  --md-sys-state-pressed-opacity:  0.12;
  --md-sys-state-dragged-opacity:  0.16;
  --md-sys-state-disabled-content: 0.38;
  --md-sys-state-disabled-container: 0.12;


  /* ================================================================
   * COMPONENT TOKENS
   * ================================================================ */

  /* Navigation Drawer */
  --md-comp-nav-drawer-width:              256px;
  --md-comp-nav-drawer-item-height:        56px;
  --md-comp-nav-drawer-item-horizontal-padding: 16px;
  --md-comp-nav-drawer-item-indicator-shape: var(--md-sys-shape-full);
  --md-comp-nav-drawer-item-indicator-height: 56px;
  --md-comp-nav-drawer-item-label-text-size: var(--md-sys-typescale-label-large-size);
  --md-comp-nav-drawer-item-label-text-weight: var(--md-sys-typescale-label-large-weight);

  /* Top App Bar — Small */
  --md-comp-top-app-bar-height:             64px;
  --md-comp-top-app-bar-container-color:    var(--md-sys-color-surface);
  --md-comp-top-app-bar-on-scroll-color:    var(--md-sys-color-surface-container);

  /* Card */
  --md-comp-card-shape:   var(--md-sys-shape-medium);
  --md-comp-card-padding: 16px;

  /* Button — Filled */
  --md-comp-button-height:               40px;
  --md-comp-button-horizontal-padding:   24px;
  --md-comp-button-shape:                var(--md-sys-shape-full);
  --md-comp-button-label-text-size:      var(--md-sys-typescale-label-large-size);
  --md-comp-button-label-text-weight:    var(--md-sys-typescale-label-large-weight);
  --md-comp-button-label-text-tracking:  var(--md-sys-typescale-label-large-tracking);

  /* Icon Button */
  --md-comp-icon-button-size:             40px;
  --md-comp-icon-button-icon-size:        24px;
  --md-comp-icon-button-shape:            var(--md-sys-shape-full);

  /* Chip */
  --md-comp-chip-height:             32px;
  --md-comp-chip-shape:              var(--md-sys-shape-small);
  --md-comp-chip-label-text-size:    var(--md-sys-typescale-label-large-size);
  --md-comp-chip-label-text-weight:  var(--md-sys-typescale-label-large-weight);

  /* Divider */
  --md-comp-divider-color:     var(--md-sys-color-outline-variant);
  --md-comp-divider-thickness: 1px;

  /* Data Table */
  --md-comp-table-row-height:          52px;
  --md-comp-table-header-row-height:   56px;
  --md-comp-table-cell-padding:        16px;
}


/* ================================================================
 * DARK THEME — M3 tonal palette (dark scheme)
 * Applied via: [data-theme="dark"] (manual toggle)
 *              @media (prefers-color-scheme: dark)  (system preference)
 * ================================================================ */

[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Primary */
    --md-sys-color-primary:              #51DBCA;
    --md-sys-color-on-primary:           #00372F;
    --md-sys-color-primary-container:    #004E45;
    --md-sys-color-on-primary-container: #74F8E5;

    /* Secondary */
    --md-sys-color-secondary:              #B0CCCA;
    --md-sys-color-on-secondary:           #1B3432;
    --md-sys-color-secondary-container:    #324B49;
    --md-sys-color-on-secondary-container: #CCE8E4;

    /* Tertiary */
    --md-sys-color-tertiary:              #A4C9E4;
    --md-sys-color-on-tertiary:           #0A3348;
    --md-sys-color-tertiary-container:    #254A61;
    --md-sys-color-on-tertiary-container: #CBE5FF;

    /* 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;

    /* Warning */
    --md-sys-color-warning:              #FFC24C;
    --md-sys-color-on-warning:           #3F2D00;
    --md-sys-color-warning-container:    #5C4000;
    --md-sys-color-on-warning-container: #FFDEA9;

    /* Surface */
    --md-sys-color-surface:                   #0E1514;
    --md-sys-color-on-surface:                #DDE4E2;
    --md-sys-color-surface-variant:           #3F4947;
    --md-sys-color-on-surface-variant:        #BEC9C7;
    --md-sys-color-surface-inverse:           #DDE4E2;
    --md-sys-color-on-surface-inverse:        #2B3231;
    --md-sys-color-surface-tint:              #51DBCA;
    --md-sys-color-surface-container-lowest:  #090F0E;
    --md-sys-color-surface-container-low:     #161D1C;
    --md-sys-color-surface-container:         #1A2120;
    --md-sys-color-surface-container-high:    #252B2A;
    --md-sys-color-surface-container-highest: #2F3635;

    /* Background */
    --md-sys-color-background:    #0E1514;
    --md-sys-color-on-background: #DDE4E2;

    /* Outline */
    --md-sys-color-outline:         #899391;
    --md-sys-color-outline-variant: #3F4947;

    /* Scrim */
    --md-sys-color-scrim: rgba(0, 0, 0, 0.56);

    /* Elevation — slightly stronger shadows in dark */
    --md-sys-elevation-level1-shadow:
      0px 1px 3px rgba(0, 0, 0, 0.5),
      0px 1px 4px 1px rgba(0, 0, 0, 0.3);
  }
}

/* Manual dark toggle overrides system preference */
[data-theme="dark"] {
  --md-sys-color-primary:              #51DBCA;
  --md-sys-color-on-primary:           #00372F;
  --md-sys-color-primary-container:    #004E45;
  --md-sys-color-on-primary-container: #74F8E5;
  --md-sys-color-secondary:              #B0CCCA;
  --md-sys-color-on-secondary:           #1B3432;
  --md-sys-color-secondary-container:    #324B49;
  --md-sys-color-on-secondary-container: #CCE8E4;
  --md-sys-color-tertiary:              #A4C9E4;
  --md-sys-color-on-tertiary:           #0A3348;
  --md-sys-color-tertiary-container:    #254A61;
  --md-sys-color-on-tertiary-container: #CBE5FF;
  --md-sys-color-error:              #FFB4AB;
  --md-sys-color-on-error:           #690005;
  --md-sys-color-error-container:    #93000A;
  --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-warning:              #FFC24C;
  --md-sys-color-on-warning:           #3F2D00;
  --md-sys-color-warning-container:    #5C4000;
  --md-sys-color-on-warning-container: #FFDEA9;
  --md-sys-color-surface:                   #0E1514;
  --md-sys-color-on-surface:                #DDE4E2;
  --md-sys-color-surface-variant:           #3F4947;
  --md-sys-color-on-surface-variant:        #BEC9C7;
  --md-sys-color-surface-inverse:           #DDE4E2;
  --md-sys-color-on-surface-inverse:        #2B3231;
  --md-sys-color-surface-tint:              #51DBCA;
  --md-sys-color-surface-container-lowest:  #090F0E;
  --md-sys-color-surface-container-low:     #161D1C;
  --md-sys-color-surface-container:         #1A2120;
  --md-sys-color-surface-container-high:    #252B2A;
  --md-sys-color-surface-container-highest: #2F3635;
  --md-sys-color-background:    #0E1514;
  --md-sys-color-on-background: #DDE4E2;
  --md-sys-color-outline:         #899391;
  --md-sys-color-outline-variant: #3F4947;
  --md-sys-color-scrim: rgba(0, 0, 0, 0.56);
}

[data-theme="light"] {
  /* Force light — tokens déjà définis dans :root */
}