/**
 * NASERP-Dotnet Design System Tokens (tokens.css)
 * Implements ADR-0025 & docs/superpowers/specs/2026-09-18-ui-ux-design-system.md
 * Fulfills Jira NERP-100 (Foundation: NERP-105, NERP-106, NERP-107, NERP-108, NERP-109)
 */

:root {
    /* ==========================================================================
       3.1 Color — Light Theme (Base / Neutral)
       ========================================================================== */
    --color-canvas: #F7F8FA;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F3F6;
    --color-border: #E1E4E8;
    --color-border-strong: #C7CCD1;
    --color-text-primary: #1F2430;
    --color-text-secondary: #5B6470;
    --color-text-disabled: #9AA1AB;
    --color-on-accent: #FFFFFF;
    --color-on-primary: #FFFFFF;

    --color-primary: #2E5AAC;
    --color-primary-hover: #24478A;
    --color-primary-subtle: #EAF0FB;

    --color-success: #1E7F4D;
    --color-success-bg: #E6F6EC;
    --color-warning: #A15C00;
    --color-warning-bg: #FFF4E0;
    --color-danger: #B3261E;
    --color-danger-bg: #FDECEA;
    --color-info: #0B6BB3;
    --color-info-bg: #E7F3FB;

    /* ==========================================================================
       3.3 Per-Module Accent Tokens (Light Theme Values)
       ========================================================================== */
    --accent-books: #0F7C6E;
    --accent-books-subtle: #E6F7F5;
    --accent-books-hover: #0B6B5E;

    --accent-finance: #2E5AAC;
    --accent-finance-subtle: #EAF0FB;
    --accent-finance-hover: #24478A;

    --accent-invoicing: #4C4FE0;
    --accent-invoicing-subtle: #EEF0FD;
    --accent-invoicing-hover: #3B3DC8;

    --accent-school: #0E8C82;
    --accent-school-subtle: #E6F7F5;
    --accent-school-hover: #0B736B;

    --accent-learning: #0E8C82;
    --accent-learning-subtle: #E6F7F5;
    --accent-learning-hover: #0B736B;

    --accent-commerce: #7B4FE0;
    --accent-commerce-subtle: #F3EEFD;
    --accent-commerce-hover: #653BC7;

    --accent-pos: #D97706;
    --accent-pos-subtle: #FEF3C7;
    --accent-pos-hover: #B45309;

    --accent-inventory: #0891B2;
    --accent-inventory-subtle: #E6F8FB;
    --accent-inventory-hover: #06748F;

    --accent-hr: #C2478E;
    --accent-hr-subtle: #FCEBF4;
    --accent-hr-hover: #A33575;

    --accent-compliance: #47506B;
    --accent-compliance-subtle: #EDF0F5;
    --accent-compliance-hover: #363D52;

    --accent-analytics: #6D28D9;
    --accent-analytics-subtle: #F3E8FF;
    --accent-analytics-hover: #5B21B6;

    --accent-pharma: #15803D;
    --accent-pharma-subtle: #E7F7ED;
    --accent-pharma-hover: #116731;

    --accent-admin: #4B5563;
    --accent-admin-subtle: #F3F4F6;
    --accent-admin-hover: #374151;

    /* Active module accent default (scoped per page or module container) */
    --module-accent: var(--color-primary);
    --module-accent-subtle: var(--color-primary-subtle);
    --module-accent-hover: var(--color-primary-hover);

    /* ==========================================================================
       3.4 Typography
       ========================================================================== */
    --font-stack: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    
    --font-display: 700 1.75rem/1.2 var(--font-stack);
    --font-h1: 600 1.5rem/1.25 var(--font-stack);
    --font-h2: 600 1.25rem/1.3 var(--font-stack);
    --font-h3: 600 1.0625rem/1.35 var(--font-stack);
    --font-body: 400 0.9375rem/1.5 var(--font-stack);
    --font-caption: 400 0.8125rem/1.4 var(--font-stack);
    --font-micro: 600 0.75rem/1.3 var(--font-stack);

    --font-size-display: 1.75rem;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.0625rem;
    --font-size-body: 0.9375rem;
    --font-size-caption: 0.8125rem;
    --font-size-micro: 0.75rem;

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==========================================================================
       3.5 Spacing Scale (4px Base)
       ========================================================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Elevation */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);

    /* Focus indicator (WCAG AA mandatory: 2px solid --color-primary, 2px offset) */
    --focus-ring: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-primary);
    --focus-outline: 2px solid var(--color-primary);
    --focus-outline-offset: 2px;
}

/* ==========================================================================
   3.2 Color — Dark Theme Overrides
   ========================================================================== */
:root[data-theme="dark"],
[data-theme="dark"],
body.dark-mode,
fluent-design-theme[mode="dark"] {
    --color-canvas: #0F1115;
    --color-surface: #171A20;
    --color-surface-alt: #1E222A;
    --color-border: #2A2F38;
    --color-border-strong: #3E4552;
    --color-text-primary: #E6E8EB;
    --color-text-secondary: #A7AEB8;
    --color-text-disabled: #636B78;
    --color-on-accent: #FFFFFF;
    --color-on-primary: #FFFFFF;

    --color-primary: #5C8AE0;
    --color-primary-hover: #7CA4EB;
    --color-primary-subtle: #1E2B47;

    --color-success: #34A853;
    --color-success-bg: #132B1D;
    --color-warning: #F59E0B;
    --color-warning-bg: #382A0F;
    --color-danger: #EF4444;
    --color-danger-bg: #3B1A1A;
    --color-info: #38BDF8;
    --color-info-bg: #142938;

    /* Dark theme module accents adjusted for AA contrast against dark surfaces */
    --accent-books: #2DD4BF;
    --accent-books-subtle: #113632;
    --accent-books-hover: #5EEAD4;

    --accent-finance: #5C8AE0;
    --accent-finance-subtle: #1E2B47;
    --accent-finance-hover: #7CA4EB;

    --accent-invoicing: #7B7DEF;
    --accent-invoicing-subtle: #24265A;
    --accent-invoicing-hover: #989AF5;

    --accent-school: #2DD4BF;
    --accent-school-subtle: #113632;
    --accent-school-hover: #5EEAD4;

    --accent-learning: #2DD4BF;
    --accent-learning-subtle: #113632;
    --accent-learning-hover: #5EEAD4;

    --accent-commerce: #A78BFA;
    --accent-commerce-subtle: #302454;
    --accent-commerce-hover: #C4B5FD;

    --accent-pos: #FBBF24;
    --accent-pos-subtle: #453108;
    --accent-pos-hover: #FCD34D;

    --accent-inventory: #22D3EE;
    --accent-inventory-subtle: #0E3640;
    --accent-inventory-hover: #67E8F9;

    --accent-hr: #F472B6;
    --accent-hr-subtle: #441731;
    --accent-hr-hover: #F9A8D4;

    --accent-compliance: #94A3B8;
    --accent-compliance-subtle: #242933;
    --accent-compliance-hover: #CBD5E1;

    --accent-analytics: #A855F7;
    --accent-analytics-subtle: #341559;
    --accent-analytics-hover: #C084FC;

    --accent-pharma: #4ADE80;
    --accent-pharma-subtle: #13331D;
    --accent-pharma-hover: #86EFAC;

    --accent-admin: #9CA3AF;
    --accent-admin-subtle: #242830;
    --accent-admin-hover: #D1D5DB;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);

    --focus-ring: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-primary);
}

/* ==========================================================================
   3.3 Per-Module Scoping Selectors
   ========================================================================== */
[data-module="finance"], .module-scope-finance {
    --module-accent: var(--accent-finance);
    --module-accent-subtle: var(--accent-finance-subtle);
    --module-accent-hover: var(--accent-finance-hover);
}
[data-module="invoicing"], .module-scope-invoicing {
    --module-accent: var(--accent-invoicing);
    --module-accent-subtle: var(--accent-invoicing-subtle);
    --module-accent-hover: var(--accent-invoicing-hover);
}
[data-module="school"], .module-scope-school {
    --module-accent: var(--accent-school);
    --module-accent-subtle: var(--accent-school-subtle);
    --module-accent-hover: var(--accent-school-hover);
}
[data-module="learning"], .module-scope-learning {
    --module-accent: var(--accent-learning);
    --module-accent-subtle: var(--accent-learning-subtle);
    --module-accent-hover: var(--accent-learning-hover);
}
[data-module="commerce"], .module-scope-commerce {
    --module-accent: var(--accent-commerce);
    --module-accent-subtle: var(--accent-commerce-subtle);
    --module-accent-hover: var(--accent-commerce-hover);
}
[data-module="pos"], .module-scope-pos {
    --module-accent: var(--accent-pos);
    --module-accent-subtle: var(--accent-pos-subtle);
    --module-accent-hover: var(--accent-pos-hover);
}
[data-module="inventory"], .module-scope-inventory {
    --module-accent: var(--accent-inventory);
    --module-accent-subtle: var(--accent-inventory-subtle);
    --module-accent-hover: var(--accent-inventory-hover);
}
[data-module="hr"], .module-scope-hr {
    --module-accent: var(--accent-hr);
    --module-accent-subtle: var(--accent-hr-subtle);
    --module-accent-hover: var(--accent-hr-hover);
}
[data-module="compliance"], .module-scope-compliance {
    --module-accent: var(--accent-compliance);
    --module-accent-subtle: var(--accent-compliance-subtle);
    --module-accent-hover: var(--accent-compliance-hover);
}
[data-module="analytics"], .module-scope-analytics {
    --module-accent: var(--accent-analytics);
    --module-accent-subtle: var(--accent-analytics-subtle);
    --module-accent-hover: var(--accent-analytics-hover);
}
[data-module="pharma"], .module-scope-pharma {
    --module-accent: var(--accent-pharma);
    --module-accent-subtle: var(--accent-pharma-subtle);
    --module-accent-hover: var(--accent-pharma-hover);
}
[data-module="admin"], [data-module="customization"], [data-module="superadmin"],
.module-scope-admin, .module-scope-customization, .module-scope-superadmin {
    --module-accent: var(--accent-admin);
    --module-accent-subtle: var(--accent-admin-subtle);
    --module-accent-hover: var(--accent-admin-hover);
}

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */
.font-display { font: var(--font-display); }
.font-h1 { font: var(--font-h1); }
.font-h2 { font: var(--font-h2); }
.font-h3 { font: var(--font-h3); }
.font-body { font: var(--font-body); }
.font-caption { font: var(--font-caption); }
.font-micro {
    font: var(--font-micro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Global Base Overrides & Reset
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-stack);
    font-size: var(--font-size-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus indicator compliance (WCAG 2.1 AA) */
*:focus-visible {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-outline-offset) !important;
}

/* ==========================================================================
   Fluent UI Component Token Overrides (NERP-108)
   ========================================================================== */

/* Fluent Button Overrides */
fluent-button[appearance="accent"],
.fluent-button-accent {
    --accent-fill-rest: var(--module-accent) !important;
    --accent-fill-hover: var(--module-accent-hover) !important;
    --accent-fill-active: var(--module-accent-hover) !important;
    --accent-foreground-rest: #FFFFFF !important;
    border-radius: var(--radius-md) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Standard Button Overrides across all modules */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--module-accent, var(--color-primary)) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--module-accent, var(--color-primary)) !important;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--module-accent-hover, var(--color-primary-hover)) !important;
    border-color: var(--module-accent-hover, var(--color-primary-hover)) !important;
}

.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary {
    background-color: transparent !important;
    color: var(--module-accent, var(--color-primary)) !important;
    border: 1px solid var(--module-accent, var(--color-primary)) !important;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn-outline-primary:hover,
button.btn-outline-primary:hover,
a.btn-outline-primary:hover {
    background-color: var(--module-accent-subtle, var(--color-primary-subtle)) !important;
}

fluent-button[appearance="neutral"],
fluent-button:not([appearance]),
.fluent-button-neutral {
    --neutral-fill-rest: var(--color-surface) !important;
    --neutral-fill-hover: var(--color-surface-alt) !important;
    --neutral-fill-active: var(--color-surface-alt) !important;
    --neutral-stroke-rest: var(--color-border) !important;
    --neutral-stroke-hover: var(--color-border-strong) !important;
    --neutral-foreground-rest: var(--color-text-primary) !important;
    border-radius: var(--radius-md) !important;
}

fluent-button[appearance="stealth"],
.fluent-button-stealth {
    --neutral-foreground-rest: var(--color-text-secondary) !important;
    --neutral-fill-hover: var(--color-surface-alt) !important;
    border-radius: var(--radius-md) !important;
}

/* Fluent Form Controls (Textfield, Select, NumberField, TextArea) */
fluent-text-field,
fluent-number-field,
fluent-text-area,
fluent-select,
fluent-combobox {
    --neutral-fill-input-rest: var(--color-surface) !important;
    --neutral-fill-input-hover: var(--color-surface) !important;
    --neutral-fill-input-active: var(--color-surface) !important;
    --neutral-stroke-input-rest: var(--color-border-strong) !important;
    --neutral-stroke-input-hover: var(--color-primary) !important;
    --neutral-foreground-rest: var(--color-text-primary) !important;
    border-radius: var(--radius-sm) !important;
}

/* Fluent Card Overrides */
fluent-card,
.fluent-card {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    padding: var(--space-5);
}

/* Fluent DataGrid Overrides */
fluent-data-grid {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden;
}

fluent-data-grid fluent-data-grid-row[row-type="header"] {
    background-color: var(--color-surface) !important;
    border-bottom: 2px solid var(--color-border) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-secondary) !important;
}

fluent-data-grid fluent-data-grid-row:hover:not([row-type="header"]) {
    background-color: var(--color-surface-alt) !important;
}

/* Fluent Dialog / Modal */
fluent-dialog {
    --dialog-border-radius: var(--radius-lg) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-2) !important;
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
}

/* Fluent MessageBar */
fluent-message-bar {
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   Design System Utility Classes (Bootstrap elimination & Token Alignment)
   ========================================================================== */
.layout-flex { display: flex !important; }
.layout-flex-col { display: flex !important; flex-direction: column !important; }
.layout-justify-between { justify-content: space-between !important; }
.layout-justify-end { justify-content: flex-end !important; }
.layout-justify-start { justify-content: flex-start !important; }
.layout-justify-center { justify-content: center !important; }
.layout-items-center { align-items: center !important; }
.layout-items-start { align-items: flex-start !important; }
.layout-items-end { align-items: flex-end !important; }
.layout-wrap { flex-wrap: wrap !important; }
.layout-gap-1 { gap: var(--space-1) !important; }
.layout-gap-2 { gap: var(--space-2) !important; }
.layout-gap-3 { gap: var(--space-3) !important; }
.layout-gap-4 { gap: var(--space-4) !important; }

.b-space-0 { margin-bottom: 0 !important; }
.b-space-1 { margin-bottom: var(--space-1) !important; }
.b-space-2 { margin-bottom: var(--space-2) !important; }
.b-space-3 { margin-bottom: var(--space-3) !important; }
.b-space-4 { margin-bottom: var(--space-4) !important; }
.b-space-5 { margin-bottom: var(--space-5) !important; }

.t-space-0 { margin-top: 0 !important; }
.t-space-1 { margin-top: var(--space-1) !important; }
.t-space-2 { margin-top: var(--space-2) !important; }
.t-space-3 { margin-top: var(--space-3) !important; }
.t-space-4 { margin-top: var(--space-4) !important; }
.t-space-5 { margin-top: var(--space-5) !important; }

/* Design System Token Badges (§10) */
.token-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-micro, 11px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.25;
}
.token-badge-primary {
    background-color: var(--module-accent, var(--color-primary-subtle));
    color: #FFFFFF;
}
.token-badge-secondary {
    background-color: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.token-badge-success {
    background-color: var(--color-success-bg, #ecfdf5);
    color: var(--color-success, #059669);
    border: 1px solid var(--color-success, #059669);
}
.token-badge-danger {
    background-color: var(--color-danger-bg, #fef2f2);
    color: var(--color-danger, #dc2626);
    border: 1px solid var(--color-danger, #dc2626);
}
.token-badge-warning {
    background-color: var(--color-warning-bg, #fffbeb);
    color: var(--color-warning, #d97706);
    border: 1px solid var(--color-warning, #d97706);
}
.token-badge-info {
    background-color: var(--color-info-bg, #eff6ff);
    color: var(--color-info, #2563eb);
    border: 1px solid var(--color-info, #2563eb);
}
.token-badge-dark {
    background-color: #1e293b;
    color: #FFFFFF;
}
.token-badge-light {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.text-muted,
.token-text-muted {
    color: var(--color-text-secondary) !important;
}