/* ============================================================
   @layer theme — skins for migrated pages.
   The palette is scoped to .app-screen (the migrated-page root), NOT
   to body globally, so un-migrated legacy pages are never affected.
   Swapping the skin rebinds --t-* only; no migrated markup changes.
   Token references only — no raw hex (D10).
   ============================================================ */
@layer theme {

  /* Default (desk/light) — inherits the default.css --t-* palette; the
     .app-screen root just re-declares the handful migrated components use
     so a migrated page is self-contained regardless of host context. */
  .app-screen {
    --t-bg: var(--mea-gray-50);        --t-bg-elevated: var(--mea-white);
    --t-bg-recessed: var(--mea-gray-100); --t-bg-active: var(--mea-gray-200);
    --t-text: var(--mea-gray-900);     --t-text-secondary: var(--mea-gray-700); --t-text-muted: var(--mea-gray-600);
    --t-border: var(--mea-gray-200);
    --t-card-bg: var(--mea-white);     --t-card-border: var(--mea-gray-200);
    --t-accent: var(--mea-blue);       --t-accent-hover: var(--mea-blue-dark); --t-accent-text: var(--mea-white);
    --t-success: var(--mea-green);     --t-success-text: var(--mea-green-dark);
    --t-warning: var(--mea-amber);     --t-warning-text: var(--mea-amber-dark);
    --t-error: var(--mea-red);         --t-error-text: var(--mea-red-dark);
    --t-link: var(--mea-blue);         --t-link-hover: var(--mea-blue-dark);
    --t-border-focus: var(--mea-blue);
    /* Hero card + progress track + primary CTA (light/staff persona — the
       DA console uses a solid royal CTA, faithful to MEA-DA-Dashboard). */
    --t-hero-bg: var(--mea-white);     --t-hero-shadow: var(--mea-shadow-card);
    --t-track: var(--mea-gray-200);
    --t-cta-bg: var(--mea-blue);       --t-cta-shadow: var(--mea-shadow-sm); --t-cta-text: var(--mea-white);
  }

  /* Citizen (participant) dark identity. Applies only to migrated content
     under the participant theme — legacy citizen styling is untouched. */
  body.citizen-theme .app-screen {
    --t-bg: var(--mea-dark);           --t-bg-elevated: var(--mea-card-dark);
    --t-bg-recessed: var(--mea-dark-2); --t-bg-active: var(--mea-navy-mid);
    --t-text: var(--mea-white);        --t-text-secondary: var(--mea-cg-3); --t-text-muted: var(--mea-cg-4);
    --t-border: var(--mea-navy-light);
    --t-card-bg: var(--mea-card-dark); --t-card-border: var(--mea-navy-light);
    /* Accent FILLS use the royal-blue family both design references specify
       for participant CTAs (reconciliation 2026-06-09); baby-blue had no
       design provenance as an accent. Bright royal pops on the #060A1E
       surface; white text sits on the fill. Baby-blue is retained only
       where it is genuinely contrast-safe on dark: text links and the
       focus ring. */
    --t-accent: var(--mea-blue-bright); --t-accent-hover: var(--mea-blue); --t-accent-text: var(--mea-white);
    --t-success: var(--mea-green-mobile); --t-success-text: var(--mea-green-mobile);
    --t-warning: var(--mea-amber);     --t-warning-text: var(--mea-amber);
    --t-error: var(--mea-red);         --t-error-text: var(--mea-red-muted);
    --t-link: var(--mea-baby-blue);    --t-link-hover: var(--mea-baby-mid);
    --t-border-focus: var(--mea-baby-blue);
    /* Hero card gets the dark-card gradient + depth shadow; the progress
       track is a visible translucent white (was #0A0F30-on-#0F1540, invisible).
       Primary CTA gets the royal-blue gradient pill + glow both references
       specify. (reconciliation 2026-06-09) */
    --t-hero-bg: var(--mea-grad-dark-card); --t-hero-shadow: var(--mea-shadow-hero);
    --t-track: color-mix(in srgb, var(--mea-white) 14%, transparent);
    --t-cta-bg: var(--mea-grad-cta);   --t-cta-shadow: var(--mea-shadow-btn); --t-cta-text: var(--mea-white);
  }

}