/* ============================================================
   @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);
    /* Page background text — text on the page bg. --t-bg is light here. */
    --t-bg-text: var(--mea-gray-900);  --t-bg-text-secondary: var(--mea-gray-700); --t-bg-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);

	--t-danger-bg: var(--mea-red);
	--t-danger-fg: var(--mea-red-dark);
  }

  /* 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);
    /* Page background text — text on the page bg. --t-bg is dark here. */
    --t-bg-text: var(--mea-white);     --t-bg-text-secondary: var(--mea-cg-3); --t-bg-text-muted: var(--mea-cg-4);
    --t-border: var(--mea-navy-light);
    --t-card-bg: var(--mea-white); --t-card-border: var(--mea-gray-200);
    /* 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);
  }

  /* White cards on the participant dark page. The block above sets --t-text
     and the --t-bg-* family for the dark page, but participant content sits
     on --t-card-bg (white) cards, which then showed white text and navy
     controls. Every class that paints --t-card-bg is listed here unless it
     rebinds --t-text itself (.onboarding-panel, .scan-result, .task-card);
     web/tests/test_card_palette.py fails when a new one is left out. Page-level
     text keeps the dark-page values. .stat and .proof-assurance are white
     surfaces painted another way. Desk pages need it too: the desk shell's
     body text is white for the dark gradient, so a white card that sets no
     color of its own inherited white text. */
  :is(body.citizen-theme .app-screen, body.desk-portal) :is(
    .active-cases-load-error, .active-timer, .ada-board, .ada-filter,
    .ada-load-error, .ada-modal, .asd-editor, .asd-empty, .asd-list,
    .asd-modal, .asd-preview, .asd-reference, .asd-upload, .audit-log,
    .audit-stat, .balance, .billing-modal, .billing-panel, .bulk-action-bar,
    .bulk-bar, .case-card, .case-modal__dialog, .certificate,
    .citation-review, .compliance-anomalies, .compliance-modal,
    .compliance-sessions, .compliance-stat, .compliance-tasks, .config-card,
    .connectors-list, .connectors-load-error, .connectors-modal,
    .consent-item, .consent-rights, .conversation-list, .course-about,
    .course-card, .course-header, .course-quiz, .dashboard-actions,
    .dashboard-panel, .deal-card, .deal-fact, .deal-modal, .deal-summary,
    .deals-dialog, .deals-load-error, .deals-panel, .doc-card, .doc-modal,
    .documents-proofs, .drill-modal,
    .eligibility-contact, .eligibility-decision, .eligibility-empty,
    .eligibility-outcome, .eligibility-ruleset,
    .eligibility-trace, .enc-detail, .encounters-queue, .export-option,
    .export-panel, .feedback__panel, .gang-unit-alert, .history, .impact, .invite-handoff,
    .issue-citizen, .issue-facts, .issue-screening, .issue-statement,
    .metric, .modal, .modify-form, .modify-success, .next-steps, .oe-flash,
    .officer-citation, .officer-issue__body, .officer-profile,
    .onboarding-media__card, .onboarding-overlay__panel, .payment-action,
    .payment-dialog, .proof-assurance, .proof-empty, .proof-ledger,
    .provider-card, .provider-detail, .provider-modal, .providers-empty,
    .providers-utilization__alert--error, .reports-alert--error,
    .reports-alert--warning, .reports-empty, .reports-panel,
    .reports-savings, .restitution-empty, .savings-hero, .schedule, .stat,
    .stat-figure, .swift-panel, .swift-stat, .swift-summary, .task-error,
    .task-map-list__item, .task-modal, .task-stat, .thread, .tracker-panel,
    .tracker-stat, .upcoming-task, .user-list, .user-modal,
    .utilization-stat, .video-placeholder, .video-player, .wf-load-error,
    .wf-modal, .wf-panel, .wf-template-list
  ) {
    color: var(--t-text);
    --t-text: var(--mea-gray-900);     --t-text-secondary: var(--mea-gray-700); --t-text-muted: var(--mea-gray-600);
    --t-bg: var(--mea-white);
    /* Text on --t-bg follows it: inside the card that is white. */
    --t-bg-text: var(--mea-gray-900);  --t-bg-text-secondary: var(--mea-gray-700); --t-bg-text-muted: var(--mea-gray-600);
    --t-bg-elevated: var(--mea-white); --t-bg-recessed: var(--mea-gray-100); --t-bg-active: var(--mea-gray-200);
    --t-border: var(--mea-gray-200);
    /* Numbers and amounts are coloured with the fill tokens, so those take
       the dark variants too (also better behind white marker glyphs). */
    --t-success: var(--mea-green-dark); --t-warning: var(--mea-amber-dark);
    --t-success-text: var(--mea-green-dark); --t-warning-text: var(--mea-amber-dark);
    --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);
  }

}