/* ==========================================================================
   Materia M3 — Design Tokens
   Implements the full Material Design 3 token system:
   - Color roles (tonal palette → light & dark schemes)
   - Shape (corner radii)
   - Motion (easing & duration)
   - State layers (opacity)
   - Z-index scale
   ========================================================================== */

:root {
    /* -------- Reference: source palette (HCT-derived tonal values) -------- */
    --md-ref-palette-primary0:   #000000;
    --md-ref-palette-primary10:  #21005D;
    --md-ref-palette-primary20:  #381E72;
    --md-ref-palette-primary30:  #4F378B;
    --md-ref-palette-primary40:  #6750A4;
    --md-ref-palette-primary50:  #7F67BE;
    --md-ref-palette-primary60:  #9A82DB;
    --md-ref-palette-primary70:  #B69DF8;
    --md-ref-palette-primary80:  #D0BCFF;
    --md-ref-palette-primary90:  #EADDFF;
    --md-ref-palette-primary95:  #F6EDFF;
    --md-ref-palette-primary99:  #FFFBFE;
    --md-ref-palette-primary100: #FFFFFF;

    --md-ref-palette-secondary0:   #000000;
    --md-ref-palette-secondary10:  #1D192B;
    --md-ref-palette-secondary20:  #332D41;
    --md-ref-palette-secondary30:  #4A4458;
    --md-ref-palette-secondary40:  #625B71;
    --md-ref-palette-secondary50:  #7A7289;
    --md-ref-palette-secondary60:  #958DA5;
    --md-ref-palette-secondary70:  #B0A7C0;
    --md-ref-palette-secondary80:  #CCC2DC;
    --md-ref-palette-secondary90:  #E8DEF8;
    --md-ref-palette-secondary95:  #F6EDFF;
    --md-ref-palette-secondary99:  #FFFBFE;
    --md-ref-palette-secondary100: #FFFFFF;

    --md-ref-palette-tertiary0:   #000000;
    --md-ref-palette-tertiary10:  #31111D;
    --md-ref-palette-tertiary20:  #492532;
    --md-ref-palette-tertiary30:  #633B48;
    --md-ref-palette-tertiary40:  #7D5260;
    --md-ref-palette-tertiary50:  #986977;
    --md-ref-palette-tertiary60:  #B58392;
    --md-ref-palette-tertiary70:  #D29DAC;
    --md-ref-palette-tertiary80:  #EFB8C8;
    --md-ref-palette-tertiary90:  #FFD8E4;
    --md-ref-palette-tertiary95:  #FFECF1;
    --md-ref-palette-tertiary99:  #FFFBFA;
    --md-ref-palette-tertiary100: #FFFFFF;

    --md-ref-palette-error0:   #000000;
    --md-ref-palette-error10:  #410E0B;
    --md-ref-palette-error20:  #601410;
    --md-ref-palette-error30:  #8C1D18;
    --md-ref-palette-error40:  #B3261E;
    --md-ref-palette-error50:  #DC362E;
    --md-ref-palette-error60:  #E46962;
    --md-ref-palette-error70:  #EC928E;
    --md-ref-palette-error80:  #F2B8B5;
    --md-ref-palette-error90:  #F9DEDC;
    --md-ref-palette-error95:  #FCEEEE;
    --md-ref-palette-error99:  #FFFBF9;
    --md-ref-palette-error100: #FFFFFF;

    --md-ref-palette-neutral0:   #000000;
    --md-ref-palette-neutral4:   #0F0D13;
    --md-ref-palette-neutral6:   #141218;
    --md-ref-palette-neutral10:  #1D1B20;
    --md-ref-palette-neutral12:  #211F26;
    --md-ref-palette-neutral17:  #2B2930;
    --md-ref-palette-neutral20:  #322F35;
    --md-ref-palette-neutral22:  #36343B;
    --md-ref-palette-neutral24:  #3B383E;
    --md-ref-palette-neutral30:  #48464C;
    --md-ref-palette-neutral40:  #605D64;
    --md-ref-palette-neutral50:  #79767D;
    --md-ref-palette-neutral60:  #938F96;
    --md-ref-palette-neutral70:  #AEAAB1;
    --md-ref-palette-neutral80:  #C9C5CD;
    --md-ref-palette-neutral87:  #DED8E1;
    --md-ref-palette-neutral90:  #E6E0E9;
    --md-ref-palette-neutral92:  #ECE6F0;
    --md-ref-palette-neutral94:  #F3EDF7;
    --md-ref-palette-neutral95:  #F4EFF4;
    --md-ref-palette-neutral96:  #F7F2FA;
    --md-ref-palette-neutral98:  #FEF7FF;
    --md-ref-palette-neutral99:  #FFFBFE;
    --md-ref-palette-neutral100: #FFFFFF;

    --md-ref-palette-neutral-variant0:   #000000;
    --md-ref-palette-neutral-variant10:  #1D1A22;
    --md-ref-palette-neutral-variant20:  #322F37;
    --md-ref-palette-neutral-variant30:  #49454F;
    --md-ref-palette-neutral-variant40:  #605D66;
    --md-ref-palette-neutral-variant50:  #79747E;
    --md-ref-palette-neutral-variant60:  #938F99;
    --md-ref-palette-neutral-variant70:  #AEA9B4;
    --md-ref-palette-neutral-variant80:  #CAC4D0;
    --md-ref-palette-neutral-variant90:  #E7E0EC;
    --md-ref-palette-neutral-variant95:  #F5EEFA;
    --md-ref-palette-neutral-variant99:  #FFFBFE;
    --md-ref-palette-neutral-variant100: #FFFFFF;

    /* ------------------------- Shape (corner radius) -------------------------
       M3 shape scale: none, extra-small, small, medium, large, extra-large, full
       ------------------------------------------------------------------- */
    --md-sys-shape-corner-none:        0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small:       8px;
    --md-sys-shape-corner-medium:      12px;
    --md-sys-shape-corner-large:       16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full:        9999px;

    /* ---------------------------- Motion: easing -----------------------------
       M3 standard, emphasized, legacy curves
       ------------------------------------------------------------------- */
    --md-sys-motion-easing-linear:                  cubic-bezier(0, 0, 1, 1);
    --md-sys-motion-easing-standard:                cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate:     cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-standard-decelerate:     cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-emphasized:              cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-accelerate:   cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized-decelerate:   cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-legacy:                  cubic-bezier(0.4, 0, 0.2, 1);
    --md-sys-motion-easing-legacy-accelerate:       cubic-bezier(0.4, 0, 1, 1);
    --md-sys-motion-easing-legacy-decelerate:       cubic-bezier(0, 0, 0.2, 1);

    /* ---------------------------- Motion: duration --------------------------- */
    --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;
    --md-sys-motion-duration-long3:     550ms;
    --md-sys-motion-duration-long4:     600ms;
    --md-sys-motion-duration-extra-long1: 700ms;
    --md-sys-motion-duration-extra-long2: 800ms;
    --md-sys-motion-duration-extra-long3: 900ms;
    --md-sys-motion-duration-extra-long4: 1000ms;

    /* ------------------------- State layer opacities ------------------------- */
    --md-sys-state-hover-state-layer-opacity:    0.08;
    --md-sys-state-focus-state-layer-opacity:    0.12;
    --md-sys-state-pressed-state-layer-opacity:  0.12;
    --md-sys-state-dragged-state-layer-opacity:  0.16;

    /* -------------------------- Z-index scale -------------------------- */
    --md-sys-z-index-drawer:    1100;
    --md-sys-z-index-app-bar:   1200;
    --md-sys-z-index-fab:       1300;
    --md-sys-z-index-modal:     1400;
    --md-sys-z-index-snackbar:  1500;
    --md-sys-z-index-tooltip:   1600;

    /* ------------------------ Layout token aliases ------------------------ */
    --md-comp-top-app-bar-height: 64px;
    --md-comp-bottom-bar-height:  80px;
    --md-comp-nav-rail-width:     80px;
    --md-comp-nav-drawer-width:   360px;

    color-scheme: light;
}

/* ============== M3 colour role FALLBACKS ==============
 * These are wrapped in `:where(:root)` so they have zero specificity and
 * are always overridden by the `:root {}` block emitted by
 * inc/dynamic-color.php on `wp_head` priority 100. They exist purely as
 * a safety net so the page renders sensibly if dynamic-color.php fails
 * to run (e.g. a PHP fatal in that file). The dark scheme is no longer
 * applied via `prefers-color-scheme` — the theme owner picks light or
 * dark in Customizer → Material You — Colour, and the visitor sees the
 * chosen mode regardless of OS preference. */
:where(:root) {
    --md-sys-color-primary:                          var(--md-ref-palette-primary40);
    --md-sys-color-on-primary:                       var(--md-ref-palette-primary100);
    --md-sys-color-primary-container:                var(--md-ref-palette-primary90);
    --md-sys-color-on-primary-container:             var(--md-ref-palette-primary10);
    --md-sys-color-secondary:                        var(--md-ref-palette-secondary40);
    --md-sys-color-on-secondary:                     var(--md-ref-palette-secondary100);
    --md-sys-color-secondary-container:              var(--md-ref-palette-secondary90);
    --md-sys-color-on-secondary-container:           var(--md-ref-palette-secondary10);
    --md-sys-color-tertiary:                         var(--md-ref-palette-tertiary40);
    --md-sys-color-on-tertiary:                      var(--md-ref-palette-tertiary100);
    --md-sys-color-tertiary-container:               var(--md-ref-palette-tertiary90);
    --md-sys-color-on-tertiary-container:            var(--md-ref-palette-tertiary10);
    --md-sys-color-error:                            var(--md-ref-palette-error40);
    --md-sys-color-on-error:                         var(--md-ref-palette-error100);
    --md-sys-color-error-container:                  var(--md-ref-palette-error90);
    --md-sys-color-on-error-container:               var(--md-ref-palette-error10);
    --md-sys-color-background:                       var(--md-ref-palette-neutral98);
    --md-sys-color-on-background:                    var(--md-ref-palette-neutral10);
    --md-sys-color-surface:                          var(--md-ref-palette-neutral98);
    --md-sys-color-on-surface:                       var(--md-ref-palette-neutral10);
    --md-sys-color-surface-variant:                  var(--md-ref-palette-neutral-variant90);
    --md-sys-color-on-surface-variant:               var(--md-ref-palette-neutral-variant30);
    --md-sys-color-outline:                          var(--md-ref-palette-neutral-variant50);
    --md-sys-color-outline-variant:                  var(--md-ref-palette-neutral-variant80);
    --md-sys-color-shadow:                           var(--md-ref-palette-neutral0);
    --md-sys-color-scrim:                            var(--md-ref-palette-neutral0);
    --md-sys-color-inverse-surface:                  var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-on-surface:               var(--md-ref-palette-neutral95);
    --md-sys-color-inverse-primary:                  var(--md-ref-palette-primary80);
    --md-sys-color-surface-tint:                     var(--md-ref-palette-primary40);
    --md-sys-color-surface-dim:                      var(--md-ref-palette-neutral87);
    --md-sys-color-surface-bright:                   var(--md-ref-palette-neutral98);
    --md-sys-color-surface-container-lowest:         var(--md-ref-palette-neutral100);
    --md-sys-color-surface-container-low:            var(--md-ref-palette-neutral96);
    --md-sys-color-surface-container:                var(--md-ref-palette-neutral94);
    --md-sys-color-surface-container-high:           var(--md-ref-palette-neutral92);
    --md-sys-color-surface-container-highest:        var(--md-ref-palette-neutral90);
}

/* ===================== Reduced motion preference ===================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --md-sys-motion-duration-short1:  0.01ms;
        --md-sys-motion-duration-short2:  0.01ms;
        --md-sys-motion-duration-short3:  0.01ms;
        --md-sys-motion-duration-short4:  0.01ms;
        --md-sys-motion-duration-medium1: 0.01ms;
        --md-sys-motion-duration-medium2: 0.01ms;
        --md-sys-motion-duration-medium3: 0.01ms;
        --md-sys-motion-duration-medium4: 0.01ms;
        --md-sys-motion-duration-long1:   0.01ms;
        --md-sys-motion-duration-long2:   0.01ms;
        --md-sys-motion-duration-long3:   0.01ms;
        --md-sys-motion-duration-long4:   0.01ms;
    }
}

/* ============== Body — uses surface tokens by default ============== */
html, body {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

::selection {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface-container-low);
}
::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    border: 3px solid var(--md-sys-color-surface-container-low);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

/* Focus ring (M3 uses 3px outline with offset) */
:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius: var(--md-sys-shape-corner-extra-small);
}