/**
 * Material Design 3 (Material You) — Design Token System
 * CMS — Course Management System
 *
 * Complete MD3 token implementation with:
 * - Color roles (light + dark)
 * - Typography scale
 * * Elevation system
 * - Shape system
 * - Spacing system
 * - Motion tokens
 * - State layers
 */

/* ============================================================
   MD3 COLOR ROLES — LIGHT THEME
   ============================================================ */
:root {
    /* CMS brand roles */
    --brand-primary: #0D6EFD;
    --brand-accent: #F5A623;
    --brand-background: #F8FAFC;
    --brand-card: #FFFFFF;
    --brand-sidebar: #0F172A;
    --brand-sidebar-text: #E2E8F0;
    --brand-success: #10B981;
    --brand-danger: #EF4444;
    --brand-warning: #F59E0B;

    /* Primary */
    --md3-primary: var(--brand-primary);
    --md3-on-primary: #FFFFFF;
    --md3-primary-container: #DBEAFE;
    --md3-on-primary-container: #102A66;

    /* Secondary */
    --md3-secondary: #4F46E5;
    --md3-on-secondary: #FFFFFF;
    --md3-secondary-container: #E0E7FF;
    --md3-on-secondary-container: #27216F;

    /* Tertiary */
    --md3-tertiary: var(--brand-accent);
    --md3-on-tertiary: #302000;
    --md3-tertiary-container: #FDE8BF;
    --md3-on-tertiary-container: #3D2800;

    /* Error */
    --md3-error: var(--brand-danger);
    --md3-on-error: #3B0606;
    --md3-error-container: #FEE2E2;
    --md3-on-error-container: #7F1D1D;

    /* Success */
    --md3-success: var(--brand-success);
    --md3-on-success: #052E20;
    --md3-success-container: #D1FAE5;
    --md3-on-success-container: #064E3B;

    /* Warning */
    --md3-warning: var(--brand-warning);
    --md3-on-warning: #302000;
    --md3-warning-foreground: #8A4B00;
    --md3-warning-container: #FEF3C7;
    --md3-on-warning-container: #713F12;

    /* Info */
    --md3-info: var(--brand-primary);
    --md3-on-info: #FFFFFF;
    --md3-info-container: #DBEAFE;
    --md3-on-info-container: #102A66;

    /* Background & Surface */
    --md3-background: var(--brand-background);
    --md3-on-background: #0F172A;
    --md3-surface: var(--brand-card);
    --md3-on-surface: #0F172A;
    --md3-surface-variant: #E2E8F0;
    --md3-on-surface-variant: #334155;
    --md3-surface-dim: #E2E8F0;
    --md3-surface-bright: #FFFFFF;
    --md3-surface-container-lowest: #FFFFFF;
    --md3-surface-container-low: #FFFFFF;
    --md3-surface-container: #F1F5F9;
    --md3-surface-container-high: #E2E8F0;
    --md3-surface-container-highest: #CBD5E1;

    /* Outline */
    --md3-outline: #64748B;
    --md3-outline-variant: #CBD5E1;

    /* Inverse */
    --md3-inverse-surface: #0F172A;
    --md3-inverse-on-surface: #F8FAFC;
    --md3-inverse-primary: #AFC5FF;

    /* Scrim */
    --md3-scrim: #000000;

    /* Shadow */
    --md3-shadow: rgba(0, 0, 0, 0.15);

    /* Legacy ERP mappings */
    --ems-primary: var(--brand-primary);
    --ems-primary-light: var(--md3-primary-container);
    --ems-secondary: var(--md3-secondary);
    --ems-accent: var(--brand-accent);
    --ems-success: var(--brand-success);
    --ems-success-light: var(--md3-success-container);
    --ems-danger: var(--brand-danger);
    --ems-danger-light: var(--md3-error-container);
    --ems-warning: var(--brand-warning);
    --ems-warning-light: var(--md3-warning-container);
    --ems-info: var(--brand-primary);
    --ems-info-light: var(--md3-info-container);
    --ems-bg: var(--brand-background);
    --ems-surface: var(--brand-card);
    --ems-card-bg: var(--brand-card);
    --ems-border: var(--md3-outline-variant);
    --ems-border-subtle: var(--md3-surface-container);
    --ems-text-main: var(--md3-on-surface);
    --ems-text-muted: var(--md3-on-surface-variant);
    --ems-text-subtle: #475569;
    --ems-neutral-light: var(--md3-surface-container);

    /* ============================================================
       MD3 TYPOGRAPHY SCALE
       ============================================================ */
    --md3-font-display-large: 57px;
    --md3-font-display-medium: 45px;
    --md3-font-display-small: 36px;
    --md3-font-headline-large: 32px;
    --md3-font-headline-medium: 28px;
    --md3-font-headline-small: 24px;
    --md3-font-title-large: 22px;
    --md3-font-title-medium: 16px;
    --md3-font-title-small: 14px;
    --md3-font-body-large: 16px;
    --md3-font-body-medium: 14px;
    --md3-font-body-small: 12px;
    --md3-font-label-large: 14px;
    --md3-font-label-medium: 12px;
    --md3-font-label-small: 11px;

    --md3-weight-regular: 400;
    --md3-weight-medium: 500;
    --md3-weight-bold: 700;

    /* ============================================================
       MD3 ELEVATION SYSTEM
       ============================================================ */
    --md3-elevation-0: none;
    --md3-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --md3-elevation-2: 0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.05);
    --md3-elevation-3: 0 4px 10px rgba(15, 23, 42, 0.07), 0 12px 24px rgba(15, 23, 42, 0.06);
    --md3-elevation-4: 0 8px 18px rgba(15, 23, 42, 0.09), 0 18px 36px rgba(15, 23, 42, 0.07);
    --md3-elevation-5: 0 12px 24px rgba(15, 23, 42, 0.10), 0 24px 48px rgba(15, 23, 42, 0.08);

    /* ============================================================
       MD3 SHAPE SYSTEM
       ============================================================ */
    --md3-shape-corner-none: 0px;
    --md3-shape-corner-extra-small: 4px;
    --md3-shape-corner-small: 8px;
    --md3-shape-corner-medium: 12px;
    --md3-shape-corner-large: 16px;
    --md3-shape-corner-extra-large: 28px;
    --md3-shape-corner-full: 9999px;

    /* ============================================================
       MD3 SPACING SYSTEM (4px grid)
       ============================================================ */
    --md3-space-0: 0px;
    --md3-space-1: 4px;
    --md3-space-2: 8px;
    --md3-space-3: 12px;
    --md3-space-4: 16px;
    --md3-space-5: 20px;
    --md3-space-6: 24px;
    --md3-space-7: 28px;
    --md3-space-8: 32px;
    --md3-space-9: 36px;
    --md3-space-10: 40px;
    --md3-space-11: 44px;
    --md3-space-12: 48px;
    --md3-space-16: 64px;
    --md3-space-20: 80px;
    --md3-space-24: 96px;

    /* ============================================================
       MD3 MOTION TOKENS
       ============================================================ */
    --md3-motion-duration-short1: 50ms;
    --md3-motion-duration-short2: 100ms;
    --md3-motion-duration-short3: 150ms;
    --md3-motion-duration-short4: 200ms;
    --md3-motion-duration-medium1: 250ms;
    --md3-motion-duration-medium2: 300ms;
    --md3-motion-duration-medium3: 350ms;
    --md3-motion-duration-medium4: 400ms;
    --md3-motion-duration-long1: 450ms;
    --md3-motion-duration-long2: 500ms;
    --md3-motion-duration-long3: 550ms;
    --md3-motion-duration-long4: 600ms;
    --md3-motion-duration-extra-long1: 700ms;
    --md3-motion-duration-extra-long2: 800ms;
    --md3-motion-duration-extra-long3: 900ms;
    --md3-motion-duration-extra-long4: 1000ms;

    --md3-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md3-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md3-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md3-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md3-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md3-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

    /* ============================================================
       MD3 STATE LAYER OPACITIES
       ============================================================ */
    --md3-state-hover: 0.08;
    --md3-state-focus: 0.10;
    --md3-state-pressed: 0.10;
    --md3-state-dragged: 0.16;

    /* ============================================================
       MD3 LAYOUT TOKENS
       ============================================================ */
    --md3-sidebar-width: 296px;
    --md3-sidebar-collapsed-width: 80px;
    --md3-header-height: 64px;
    --md3-content-max-width: 1680px;
    --md3-content-padding: 24px;
    --md3-grid-gutter: 24px;
    --md3-grid-margin: 16px;
    --md3-breakpoint-compact: 600px;
    --md3-breakpoint-medium: 840px;
    --md3-breakpoint-expanded: 1200px;
    --md3-breakpoint-large: 1600px;

    /* ============================================================
       MD3 COMPONENT-SPECIFIC TOKENS
       ============================================================ */
    --md3-card-radius: var(--md3-shape-corner-medium);
    --md3-button-radius: var(--md3-shape-corner-full);
    --md3-chip-radius: var(--md3-shape-corner-small);
    --md3-dialog-radius: var(--md3-shape-corner-extra-large);
    --md3-text-field-radius: var(--md3-shape-corner-extra-small);
    --md3-fab-radius: var(--md3-shape-corner-large);
    --md3-nav-rail-width: 80px;
    --md3-nav-drawer-width: 360px;
    --md3-bottom-app-bar-height: 80px;
    --md3-top-app-bar-height: 64px;

    /* ============================================================
       MD3 FONT FAMILIES
       ============================================================ */
    --md3-font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --md3-font-arabic: 'Vazirmatn', 'Noto Sans Arabic', 'Inter', sans-serif;
    --md3-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* ============================================================
       MD3 ICON SIZES
       ============================================================ */
    --md3-icon-size-small: 18px;
    --md3-icon-size-medium: 24px;
    --md3-icon-size-large: 36px;
    --md3-icon-size-extra-large: 48px;

    /* ============================================================
       MD3 TOUCH TARGETS
       ============================================================ */
    --md3-touch-target-min: 48px;
    --md3-touch-target-comfortable: 56px;
}

/* ============================================================
   MD3 COLOR ROLES — DARK THEME
   ============================================================ */
[data-theme="dark"] {
    /* Primary */
    --md3-primary: #AFC5FF;
    --md3-on-primary: #071B4D;
    --md3-primary-container: #163FA2;
    --md3-on-primary-container: #FFFFFF;

    /* Secondary */
    --md3-secondary: #CBD5E1;
    --md3-on-secondary: #0F172A;
    --md3-secondary-container: #334155;
    --md3-on-secondary-container: #F8FAFC;

    /* Tertiary */
    --md3-tertiary: #F5A623;
    --md3-on-tertiary: #302000;
    --md3-tertiary-container: #5C3B08;
    --md3-on-tertiary-container: #FDE8BF;

    /* Error */
    --md3-error: #EF4444;
    --md3-on-error: #3B0606;
    --md3-error-container: #7F1D1D;
    --md3-on-error-container: #FEE2E2;

    /* Success */
    --md3-success: #10B981;
    --md3-on-success: #052E20;
    --md3-success-container: #064E3B;
    --md3-on-success-container: #D1FAE5;

    /* Warning */
    --md3-warning: #F59E0B;
    --md3-on-warning: #302000;
    --md3-warning-foreground: #FBBF24;
    --md3-warning-container: #713F12;
    --md3-on-warning-container: #FEF3C7;

    /* Info */
    --md3-info: #AFC5FF;
    --md3-on-info: #071B4D;
    --md3-info-container: #163FA2;
    --md3-on-info-container: #FFFFFF;

    /* Background & Surface */
    --md3-background: #0B1220;
    --md3-on-background: #F8FAFC;
    --md3-surface: #0F172A;
    --md3-on-surface: #F8FAFC;
    --md3-surface-variant: #334155;
    --md3-on-surface-variant: #CBD5E1;
    --md3-surface-dim: #0B1220;
    --md3-surface-bright: #334155;
    --md3-surface-container-lowest: #080E1B;
    --md3-surface-container-low: #0F172A;
    --md3-surface-container: #172238;
    --md3-surface-container-high: #1E293B;
    --md3-surface-container-highest: #334155;

    /* Outline */
    --md3-outline: #94A3B8;
    --md3-outline-variant: #475569;

    /* Inverse */
    --md3-inverse-surface: #F8FAFC;
    --md3-inverse-on-surface: #0F172A;
    --md3-inverse-primary: #163FA2;

    /* Shadow */
    --md3-shadow: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   MD3 TYPOGRAPHY CLASSES
   ============================================================ */
.md3-display-large {
    font-size: var(--md3-font-display-large);
    font-weight: var(--md3-weight-regular);
    line-height: 64px;
    letter-spacing: -0.25px;
}
.md3-display-medium {
    font-size: var(--md3-font-display-medium);
    font-weight: var(--md3-weight-regular);
    line-height: 52px;
    letter-spacing: 0;
}
.md3-display-small {
    font-size: var(--md3-font-display-small);
    font-weight: var(--md3-weight-regular);
    line-height: 44px;
    letter-spacing: 0;
}
.md3-headline-large {
    font-size: var(--md3-font-headline-large);
    font-weight: var(--md3-weight-regular);
    line-height: 40px;
    letter-spacing: 0;
}
.md3-headline-medium {
    font-size: var(--md3-font-headline-medium);
    font-weight: var(--md3-weight-regular);
    line-height: 36px;
    letter-spacing: 0;
}
.md3-headline-small {
    font-size: var(--md3-font-headline-small);
    font-weight: var(--md3-weight-regular);
    line-height: 32px;
    letter-spacing: 0;
}
.md3-title-large {
    font-size: var(--md3-font-title-large);
    font-weight: var(--md3-weight-regular);
    line-height: 28px;
    letter-spacing: 0;
}
.md3-title-medium {
    font-size: var(--md3-font-title-medium);
    font-weight: var(--md3-weight-medium);
    line-height: 24px;
    letter-spacing: 0.15px;
}
.md3-title-small {
    font-size: var(--md3-font-title-small);
    font-weight: var(--md3-weight-medium);
    line-height: 20px;
    letter-spacing: 0.1px;
}
.md3-body-large {
    font-size: var(--md3-font-body-large);
    font-weight: var(--md3-weight-regular);
    line-height: 24px;
    letter-spacing: 0.5px;
}
.md3-body-medium {
    font-size: var(--md3-font-body-medium);
    font-weight: var(--md3-weight-regular);
    line-height: 20px;
    letter-spacing: 0.25px;
}
.md3-body-small {
    font-size: var(--md3-font-body-small);
    font-weight: var(--md3-weight-regular);
    line-height: 16px;
    letter-spacing: 0.4px;
}
.md3-label-large {
    font-size: var(--md3-font-label-large);
    font-weight: var(--md3-weight-medium);
    line-height: 20px;
    letter-spacing: 0.1px;
}
.md3-label-medium {
    font-size: var(--md3-font-label-medium);
    font-weight: var(--md3-weight-medium);
    line-height: 16px;
    letter-spacing: 0.5px;
}
.md3-label-small {
    font-size: var(--md3-font-label-small);
    font-weight: var(--md3-weight-medium);
    line-height: 16px;
    letter-spacing: 0.5px;
}

/* ============================================================
   MD3 ELEVATION UTILITY CLASSES
   ============================================================ */
.md3-elevation-0 { box-shadow: var(--md3-elevation-0); }
.md3-elevation-1 { box-shadow: var(--md3-elevation-1); }
.md3-elevation-2 { box-shadow: var(--md3-elevation-2); }
.md3-elevation-3 { box-shadow: var(--md3-elevation-3); }
.md3-elevation-4 { box-shadow: var(--md3-elevation-4); }
.md3-elevation-5 { box-shadow: var(--md3-elevation-5); }

/* ============================================================
   MD3 SHAPE UTILITY CLASSES
   ============================================================ */
.md3-shape-none { border-radius: var(--md3-shape-corner-none); }
.md3-shape-xs { border-radius: var(--md3-shape-corner-extra-small); }
.md3-shape-sm { border-radius: var(--md3-shape-corner-small); }
.md3-shape-md { border-radius: var(--md3-shape-corner-medium); }
.md3-shape-lg { border-radius: var(--md3-shape-corner-large); }
.md3-shape-xl { border-radius: var(--md3-shape-corner-extra-large); }
.md3-shape-full { border-radius: var(--md3-shape-corner-full); }

/* ============================================================
   MD3 SPACING UTILITY CLASSES
   ============================================================ */
.md3-p-0 { padding: var(--md3-space-0); }
.md3-p-1 { padding: var(--md3-space-1); }
.md3-p-2 { padding: var(--md3-space-2); }
.md3-p-3 { padding: var(--md3-space-3); }
.md3-p-4 { padding: var(--md3-space-4); }
.md3-p-5 { padding: var(--md3-space-5); }
.md3-p-6 { padding: var(--md3-space-6); }
.md3-p-8 { padding: var(--md3-space-8); }
.md3-p-12 { padding: var(--md3-space-12); }

.md3-m-0 { margin: var(--md3-space-0); }
.md3-m-1 { margin: var(--md3-space-1); }
.md3-m-2 { margin: var(--md3-space-2); }
.md3-m-3 { margin: var(--md3-space-3); }
.md3-m-4 { margin: var(--md3-space-4); }
.md3-m-6 { margin: var(--md3-space-6); }
.md3-m-8 { margin: var(--md3-space-8); }

.md3-gap-1 { gap: var(--md3-space-1); }
.md3-gap-2 { gap: var(--md3-space-2); }
.md3-gap-3 { gap: var(--md3-space-3); }
.md3-gap-4 { gap: var(--md3-space-4); }
.md3-gap-6 { gap: var(--md3-space-6); }
.md3-gap-8 { gap: var(--md3-space-8); }

/* ============================================================
   MD3 FONT FAMILY UTILITIES
   ============================================================ */
.md3-font-sans { font-family: var(--md3-font-sans); }
.md3-font-arabic { font-family: var(--md3-font-arabic); }
.md3-font-mono { font-family: var(--md3-font-mono); }

/* ============================================================
   MD3 ACCESSIBILITY — Focus States
   ============================================================ */
.md3-focus-visible:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

.md3-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
   MD3 RTL SUPPORT
   ============================================================ */
[dir="rtl"] .md3-start { margin-left: 0; margin-right: var(--md3-space-2); }
[dir="rtl"] .md3-end { margin-right: 0; margin-left: var(--md3-space-2); }

/* ============================================================
   MD3 REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}