/* ============================================================
 * Axismundi — tokens.sys.dark.css
 * v3.6.1 — Token Architecture Refactor Phase 1A
 *
 * Runtime semantic dark layer.
 * Dark mode swaps md-sys mappings only; md-ref remains mode-agnostic.
 * ============================================================ */

/* ------------------------------------------------------------
 * §2.2 Dark scheme
 * Source: M3-COLOR-TOKEN.md §2.2
 *
 * Selector strategy (BRIEF.md "Modes" — auto + manual override):
 *   1. :root[data-theme="dark"]
 *      → explicit user choice. Highest priority. Wins over both
 *        the light defaults in :root and the auto media query.
 *   2. @media (prefers-color-scheme: dark)
 *        :root:not([data-theme]),
 *        :root[data-theme="auto"]
 *      → auto-follow OS for absent legacy state and explicit auto.
 *
 * The two blocks share an identical token set so cascade order
 * is enough; no !important needed.
 * ------------------------------------------------------------ */
:root[data-theme="dark"] {
  /* --- Brand: primary --- */
  --md-sys-color-primary:              var(--md-ref-palette-primary-80); /* primary 80  */
  --md-sys-color-on-primary:           var(--md-ref-palette-primary-20); /* primary 20  */
  --md-sys-color-primary-container:    var(--md-ref-palette-primary-30); /* primary 30  */
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary-90); /* primary 90  */

  /* --- Brand: secondary --- */
  --md-sys-color-secondary:              var(--md-ref-palette-secondary-80); /* secondary 80 */
  --md-sys-color-on-secondary:           var(--md-ref-palette-secondary-20); /* secondary 20 */
  --md-sys-color-secondary-container:    var(--md-ref-palette-secondary-30); /* secondary 30 */
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary-90); /* secondary 90 */

  /* --- Brand: tertiary --- */
  --md-sys-color-tertiary:              var(--md-ref-palette-tertiary-80); /* tertiary 80 */
  --md-sys-color-on-tertiary:           var(--md-ref-palette-tertiary-20); /* tertiary 20 */
  --md-sys-color-tertiary-container:    var(--md-ref-palette-tertiary-30); /* tertiary 30 */
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary-90); /* tertiary 90 */

  /* --- Status: error --- */
  --md-sys-color-error:              var(--md-ref-palette-error-80); /* error 80 */
  --md-sys-color-on-error:           var(--md-ref-palette-error-20); /* error 20 */
  --md-sys-color-error-container:    var(--md-ref-palette-error-30); /* error 30 */
  --md-sys-color-on-error-container: var(--md-ref-palette-error-90); /* error 90 */

  /* --- Surface: background + surface --- */
  --md-sys-color-background:         var(--md-ref-palette-neutral-6);            /* neutral 6  */
  --md-sys-color-on-background:      var(--md-ref-palette-neutral-90);           /* neutral 90 */
  --md-sys-color-surface:            var(--md-ref-palette-neutral-6);            /* neutral 6  */
  --md-sys-color-on-surface:         var(--md-ref-palette-neutral-90);           /* neutral 90 */
  --md-sys-color-surface-variant:    var(--md-ref-palette-neutral-variant-30);   /* neutral-variant 30 */
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant-80);   /* neutral-variant 80 */
  --md-sys-color-surface-bright:     var(--md-ref-palette-neutral-24);           /* neutral 24 */
  --md-sys-color-surface-dim:        var(--md-ref-palette-neutral-6);            /* neutral 6  */

  /* --- Surface: 5 container levels (lowest → highest) --- */
  --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral-4);  /* neutral 4  */
  --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral-10); /* neutral 10 */
  --md-sys-color-surface-container:         var(--md-ref-palette-neutral-12); /* neutral 12 */
  --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral-17); /* neutral 17 */
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-22); /* neutral 22 */

  /* --- Inverse --- */
  --md-sys-color-inverse-surface:    var(--md-ref-palette-neutral-90); /* neutral 90 */
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-20); /* neutral 20 */
  --md-sys-color-inverse-primary:    var(--md-ref-palette-primary-40); /* primary 40 */

  /* --- Outline --- */
  --md-sys-color-outline:         var(--md-ref-palette-neutral-variant-60); /* neutral-variant 60 */
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant-30); /* neutral-variant 30 */

  /* --- Other --- */
  --md-sys-color-shadow: var(--md-ref-palette-neutral-0);
  --md-sys-color-scrim:  var(--md-ref-palette-neutral-0);
}

/* ------------------------------------------------------------
 * §2.3 Auto mode — follow OS preference unless user picked light
 * ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="auto"] {
    /* --- Brand: primary --- */
    --md-sys-color-primary:              var(--md-ref-palette-primary-80);
    --md-sys-color-on-primary:           var(--md-ref-palette-primary-20);
    --md-sys-color-primary-container:    var(--md-ref-palette-primary-30);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary-90);

    /* --- Brand: secondary --- */
    --md-sys-color-secondary:              var(--md-ref-palette-secondary-80);
    --md-sys-color-on-secondary:           var(--md-ref-palette-secondary-20);
    --md-sys-color-secondary-container:    var(--md-ref-palette-secondary-30);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary-90);

    /* --- Brand: tertiary --- */
    --md-sys-color-tertiary:              var(--md-ref-palette-tertiary-80);
    --md-sys-color-on-tertiary:           var(--md-ref-palette-tertiary-20);
    --md-sys-color-tertiary-container:    var(--md-ref-palette-tertiary-30);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary-90);

    /* --- Status: error --- */
    --md-sys-color-error:              var(--md-ref-palette-error-80);
    --md-sys-color-on-error:           var(--md-ref-palette-error-20);
    --md-sys-color-error-container:    var(--md-ref-palette-error-30);
    --md-sys-color-on-error-container: var(--md-ref-palette-error-90);

    /* --- Surface: background + surface --- */
    --md-sys-color-background:         var(--md-ref-palette-neutral-6);
    --md-sys-color-on-background:      var(--md-ref-palette-neutral-90);
    --md-sys-color-surface:            var(--md-ref-palette-neutral-6);
    --md-sys-color-on-surface:         var(--md-ref-palette-neutral-90);
    --md-sys-color-surface-variant:    var(--md-ref-palette-neutral-variant-30);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant-80);
    --md-sys-color-surface-bright:     var(--md-ref-palette-neutral-24);
    --md-sys-color-surface-dim:        var(--md-ref-palette-neutral-6);

    /* --- Surface: 5 container levels --- */
    --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral-4);
    --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral-10);
    --md-sys-color-surface-container:         var(--md-ref-palette-neutral-12);
    --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral-17);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-22);

    /* --- Inverse --- */
    --md-sys-color-inverse-surface:    var(--md-ref-palette-neutral-90);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-20);
    --md-sys-color-inverse-primary:    var(--md-ref-palette-primary-40);

    /* --- Outline --- */
    --md-sys-color-outline:         var(--md-ref-palette-neutral-variant-60);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant-30);

    /* --- Other --- */
    --md-sys-color-shadow: var(--md-ref-palette-neutral-0);
    --md-sys-color-scrim:  var(--md-ref-palette-neutral-0);
  }
}


/* §8.2 Dark mode — suppress shadows (tonal elevation primary) */
:root[data-theme="dark"] {
  --md-sys-elevation-shadow-level1: none;
  --md-sys-elevation-shadow-level2: none;
  --md-sys-elevation-shadow-level3: none;
  --md-sys-elevation-shadow-level4: none;
  --md-sys-elevation-shadow-level5: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="auto"] {
    --md-sys-elevation-shadow-level1: none;
    --md-sys-elevation-shadow-level2: none;
    --md-sys-elevation-shadow-level3: none;
    --md-sys-elevation-shadow-level4: none;
    --md-sys-elevation-shadow-level5: none;
  }
}