/**
 * Material Design 3 Design Tokens
 * GnewsAlyzer V2 - Design System
 */

:root {
  /* ============================================
     COLOR SYSTEM - Material Design 3 Light Theme
     ============================================ */
  
  /* Primary Colors */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  
  /* Secondary Colors */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  
  /* Tertiary Colors */
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  
  /* Background & Surface */
  --md-sys-color-background: #FFFBFE;
  --md-sys-color-on-background: #1C1B1F;
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  
  /* Outline & Error */
  --md-sys-color-outline: #79747E;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  
  /* ============================================
     TYPOGRAPHY - Material Design 3 Type Scale
     ============================================ */
  
  /* Font Family */
  --md-sys-typescale-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Headline Styles */
  --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;
  
  /* Title Styles */
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-weight: 500;
  --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;
  
  /* Body Styles */
  --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;
  
  /* Label Styles */
  --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;
  
  /* ============================================
     SPACING SYSTEM - 4px base unit
     ============================================ */
  
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-16: 64px;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --md-sys-shape-corner-none: 0px;
  --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;
  
  /* Button specific */
  --md-sys-shape-corner-button: 20px;
  
  /* ============================================
     ELEVATION & SHADOWS
     ============================================ */
  
  /* Elevation 0 (no shadow) */
  --md-sys-elevation-0: none;
  
  /* Elevation 1 */
  --md-sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
                        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  
  /* Elevation 2 */
  --md-sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
                        0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  
  /* Elevation 3 */
  --md-sys-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3),
                        0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  
  /* Elevation 4 */
  --md-sys-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3),
                        0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  
  /* Elevation 5 */
  --md-sys-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3),
                        0px 8px 12px 6px rgba(0, 0, 0, 0.15);
  
  /* ============================================
     SIDEBAR DIMENSIONS
     ============================================ */
  
  --md-sys-sidebar-width-expanded: 240px;
  --md-sys-sidebar-width-collapsed: 72px;
  --md-sys-sidebar-elevation: var(--md-sys-elevation-1);
  
  /* ============================================
     TOP BAR DIMENSIONS
     ============================================ */
  
  --md-sys-topbar-height: 56px;
  --md-sys-topbar-elevation: var(--md-sys-elevation-1);
  
  /* ============================================
     ICON SIZES
     ============================================ */
  
  --md-sys-icon-size-small: 18px;
  --md-sys-icon-size-medium: 20px;
  --md-sys-icon-size-large: 24px;
  --md-sys-icon-size-extra-large: 28px;
  
  /* ============================================
     BUTTON HEIGHTS
     ============================================ */
  
  --md-sys-button-height-small: 32px;
  --md-sys-button-height-medium: 40px;
  --md-sys-button-height-large: 44px;
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 1, 0.9);
  
  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  
  --md-sys-z-index-sidebar: 1000;
  --md-sys-z-index-topbar: 1100;
  --md-sys-z-index-drawer-overlay: 1200;
  --md-sys-z-index-modal: 1300;
  --md-sys-z-index-dropdown: 1400;
}

/* ============================================
   UTILITY CLASSES FOR TYPOGRAPHY
   ============================================ */

.md-headline-large {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-headline-medium {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-headline-small {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-title-large {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-title-medium {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-title-small {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-body-large {
  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);
}

.md-body-medium {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-body-small {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-background);
}

.md-label-large {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-surface);
}

.md-label-medium {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-surface);
}

.md-label-small {
  font-family: var(--md-sys-typescale-font-family);
  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);
  color: var(--md-sys-color-on-surface);
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--md-sys-typescale-font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Screen reader only class */
.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;
}

/* Skip to main content link for accessibility */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 var(--md-sys-shape-corner-small) 0;
}

.skip-to-main:focus {
  top: 0;
}