/**
 * Material Design 3 Design System
 * Lightweight custom implementation for MT Licence Console
 */

/* ============================================
   CSS Variables - Material Design 3 Tokens
   ============================================ */

:root {
  /* Primary Colors */
  --md-sys-color-primary: #1976d2;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d0e4ff;
  --md-sys-color-on-primary-container: #001d35;

  /* Secondary Colors */
  --md-sys-color-secondary: #535f70;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d7e3f7;
  --md-sys-color-on-secondary-container: #101c2b;

  /* Tertiary Colors */
  --md-sys-color-tertiary: #6b5778;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f2daff;
  --md-sys-color-on-tertiary-container: #251431;

  /* Error Colors */
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  /* Surface Colors */
  --md-sys-color-surface: #fdfcff;
  --md-sys-color-on-surface: #1a1c1e;
  --md-sys-color-surface-variant: #e0e2ec;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f9ff;
  --md-sys-color-surface-container: #ebeef6;
  --md-sys-color-surface-container-high: #e5e8f0;
  --md-sys-color-surface-container-highest: #e0e2ea;

  /* Outline Colors */
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6cf;

  /* Background */
  --md-sys-color-background: #fdfcff;
  --md-sys-color-on-background: #1a1c1e;

  /* Inverse Colors */
  --md-sys-color-inverse-surface: #2f3033;
  --md-sys-color-inverse-on-surface: #f1f0f4;
  --md-sys-color-inverse-primary: #9ecaff;

  /* Elevation Shadows */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* Shape */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Typography - Font Family */
  --md-sys-typescale-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Typography - Display */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-line-height: 64px;

  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-line-height: 52px;

  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-line-height: 44px;

  /* Typography - Headline */
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-line-height: 40px;

  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-line-height: 36px;

  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-line-height: 32px;

  /* Typography - Title */
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-line-height: 28px;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-line-height: 24px;

  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-line-height: 20px;

  /* Typography - Body */
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-line-height: 24px;

  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-line-height: 20px;

  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-line-height: 16px;

  /* Typography - Label */
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-line-height: 20px;

  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-line-height: 16px;

  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-line-height: 16px;

  /* State Layers */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;

  /* Spacing */
  --md-sys-spacing-xs: 4px;
  --md-sys-spacing-sm: 8px;
  --md-sys-spacing-md: 16px;
  --md-sys-spacing-lg: 24px;
  --md-sys-spacing-xl: 32px;
  --md-sys-spacing-2xl: 48px;
  --md-sys-spacing-3xl: 64px;
}

/* ============================================
   Base Styles
   ============================================ */

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: var(--md-sys-typescale-body-large-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
}

/* ============================================
   Typography Classes
   ============================================ */

/* Display */
.md-typescale-display-large {
  font-size: var(--md-sys-typescale-display-large-size);
  font-weight: var(--md-sys-typescale-display-large-weight);
  line-height: var(--md-sys-typescale-display-large-line-height);
}

.md-typescale-display-medium {
  font-size: var(--md-sys-typescale-display-medium-size);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  line-height: var(--md-sys-typescale-display-medium-line-height);
}

.md-typescale-display-small {
  font-size: var(--md-sys-typescale-display-small-size);
  font-weight: var(--md-sys-typescale-display-small-weight);
  line-height: var(--md-sys-typescale-display-small-line-height);
}

/* Headline */
.md-typescale-headline-large, h1 {
  font-size: var(--md-sys-typescale-headline-large-size);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  margin: 0 0 var(--md-sys-spacing-md);
}

.md-typescale-headline-medium, h2 {
  font-size: var(--md-sys-typescale-headline-medium-size);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  margin: 0 0 var(--md-sys-spacing-md);
}

.md-typescale-headline-small, h3 {
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  margin: 0 0 var(--md-sys-spacing-sm);
}

/* Title */
.md-typescale-title-large, h4 {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  margin: 0 0 var(--md-sys-spacing-sm);
}

.md-typescale-title-medium, h5 {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  margin: 0 0 var(--md-sys-spacing-sm);
}

.md-typescale-title-small, h6 {
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
  line-height: var(--md-sys-typescale-title-small-line-height);
  margin: 0 0 var(--md-sys-spacing-xs);
}

/* Body */
.md-typescale-body-large {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: var(--md-sys-typescale-body-large-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
}

.md-typescale-body-medium {
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.md-typescale-body-small {
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: var(--md-sys-typescale-body-small-weight);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

/* Label */
.md-typescale-label-large {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
}

.md-typescale-label-medium {
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}

.md-typescale-label-small {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  line-height: var(--md-sys-typescale-label-small-line-height);
}

p {
  margin: 0 0 var(--md-sys-spacing-md);
}

/* ============================================
   Utility Classes
   ============================================ */

/* Elevation */
.md-elevation-0 { box-shadow: var(--md-sys-elevation-0); }
.md-elevation-1 { box-shadow: var(--md-sys-elevation-1); }
.md-elevation-2 { box-shadow: var(--md-sys-elevation-2); }
.md-elevation-3 { box-shadow: var(--md-sys-elevation-3); }
.md-elevation-4 { box-shadow: var(--md-sys-elevation-4); }
.md-elevation-5 { box-shadow: var(--md-sys-elevation-5); }

/* Shape */
.md-shape-none { border-radius: var(--md-sys-shape-corner-none); }
.md-shape-extra-small { border-radius: var(--md-sys-shape-corner-extra-small); }
.md-shape-small { border-radius: var(--md-sys-shape-corner-small); }
.md-shape-medium { border-radius: var(--md-sys-shape-corner-medium); }
.md-shape-large { border-radius: var(--md-sys-shape-corner-large); }
.md-shape-extra-large { border-radius: var(--md-sys-shape-corner-extra-large); }
.md-shape-full { border-radius: var(--md-sys-shape-corner-full); }

/* Spacing */
.md-spacing-xs { margin: var(--md-sys-spacing-xs); }
.md-spacing-sm { margin: var(--md-sys-spacing-sm); }
.md-spacing-md { margin: var(--md-sys-spacing-md); }
.md-spacing-lg { margin: var(--md-sys-spacing-lg); }
.md-spacing-xl { margin: var(--md-sys-spacing-xl); }