/* Font Face Declarations - Now using Raleway Google Font */
/* Raleway fonts are loaded from Google Fonts */

/* CSS Variables - Google NotebookLM Design System (Material Design 3) */
:root {
  /* Typography - Raleway Font Family */
  --font-display: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-text: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-description: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  
  /* Material Design 3 Typography Scale */
  --text-display-large: 3.5625rem;   /* 57px */
  --text-display-medium: 2.8125rem;  /* 45px */
  --text-display-small: 2.25rem;     /* 36px */
  --text-headline-large: 2rem;       /* 32px */
  --text-headline-medium: 1.75rem;   /* 28px */
  --text-headline-small: 1.5rem;     /* 24px */
  --text-title-large: 1.375rem;      /* 22px */
  --text-title-medium: 1rem;         /* 16px */
  --text-title-small: 0.875rem;      /* 14px */
  --text-body-large: 1rem;           /* 16px */
  --text-body-medium: 0.875rem;      /* 14px */
  --text-body-small: 0.75rem;        /* 12px */
  --text-label-large: 0.875rem;      /* 14px */
  --text-label-medium: 0.75rem;      /* 12px */
  --text-label-small: 0.6875rem;     /* 11px */
  
  /* Material Design 3 Line Heights */
  --line-height-display-large: 4rem;     /* 64px */
  --line-height-display-medium: 3.25rem; /* 52px */
  --line-height-display-small: 2.75rem;  /* 44px */
  --line-height-headline-large: 2.5rem;  /* 40px */
  --line-height-headline-medium: 2.25rem;/* 36px */
  --line-height-headline-small: 2rem;    /* 32px */
  --line-height-title-large: 1.75rem;    /* 28px */
  --line-height-title-medium: 1.5rem;    /* 24px */
  --line-height-title-small: 1.25rem;    /* 20px */
  --line-height-body-large: 1.5rem;      /* 24px */
  --line-height-body-medium: 1.25rem;    /* 20px */
  --line-height-body-small: 1rem;        /* 16px */
  
  /* Font Weights - Updated for Raleway */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* NotebookLM Color Palette */
  --color-primary: #000000;
  --color-primary-container: #f5f5f5;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #000000;
  --color-secondary: #34a853;
  --color-secondary-container: #e8f5e8;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #0d5016;
  --color-tertiary: #4285f4;
  --color-tertiary-container: #e3f2fd;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #1565c0;
  --color-error: #ea4335;
  --color-error-container: #fce8e6;
  --color-on-error: #ffffff;
  --color-on-error-container: #410002;
  --color-background: #ffffff;
  --color-on-background: #000000;
  --color-surface: #ffffff;
  --color-surface-dim: #f8f9fa;
  --color-surface-bright: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #ffffff;
  --color-surface-container: #ffffff;
  --color-surface-container-high: #f8f9fa;
  --color-surface-container-highest: #e8eaed;
  --color-surface-variant: #f8f9fa;
  --color-on-surface: #000000;
  --color-on-surface-variant: #5f6368;
  --color-outline: #dadce0;
  --color-outline-variant: #e8eaed;
  --color-inverse-surface: #2d3748;
  --color-inverse-on-surface: #ffffff;
  --color-inverse-primary: #ffffff;
  
  /* Material Design 3 Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* Extended Spacing Scale */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */
  --space-4xl: 8rem;    /* 128px */
  
  /* Material Design 3 Shape Scale */
  --shape-corner-none: 0;
  --shape-corner-extra-small: 4px;
  --shape-corner-small: 8px;
  --shape-corner-medium: 12px;
  --shape-corner-large: 16px;
  --shape-corner-extra-large: 28px;
  --shape-corner-full: 50%;
  
  /* Material Design 3 Elevation Shadows */
  --elevation-level0: none;
  --elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
  
  /* Breakpoints */
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
}

/* Responsive Typography */
@media (max-width: 991px) {
  :root {
    --text-display-large: 4.5rem;
    --text-display-medium: 2.2rem;
    --text-display-small: 2rem;
    --text-headline-large: 1.75rem;
    --text-headline-small: 1.2rem;
    --text-title-large: 1.2rem;
    --text-body-large: 1rem;
    
    --line-height-display-large: 4.625rem;
    --line-height-display-medium: 2.5rem;
    --line-height-display-small: 2.5rem;
    --line-height-headline-large: 1.55rem;
    --line-height-headline-small: 2rem;
    --line-height-title-large: 2rem;
    --line-height-body-large: 1.55rem;
  }
}

@media (max-width: 767px) {
  :root {
    --text-display-large: 2.5rem;
    --text-display-medium: 2rem;
    --text-display-small: 1.8125rem;
    --text-headline-large: 1.5rem;
    --text-headline-small: 1.1rem;
    --text-title-large: 1.1rem;
    --text-body-large: 0.9rem;
    
    --line-height-display-large: 3.625rem;
    --line-height-display-medium: 2.25rem;
    --line-height-display-small: 2.25rem;
    --line-height-headline-large: 2rem;
    --line-height-headline-small: 1.75rem;
    --line-height-title-large: 1.75rem;
    --line-height-body-large: 1.4rem;
  }
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-text);
  font-size: var(--text-body-large);
  line-height: var(--line-height-body-large);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  margin: 0;
}

/* Material Design 3 Typography Classes */
.display-large {
  font-family: var(--font-display);
  font-size: var(--text-display-large);
  line-height: var(--line-height-display-large);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.25px;
}

.display-medium {
  font-family: var(--font-display);
  font-size: var(--text-display-medium);
  line-height: var(--line-height-display-medium);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.display-small {
  font-family: var(--font-display);
  font-size: var(--text-display-small);
  line-height: var(--line-height-display-small);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.headline-large {
  font-family: var(--font-display);
  font-size: var(--text-headline-large);
  line-height: var(--line-height-headline-large);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.headline-medium {
  font-family: var(--font-display);
  font-size: var(--text-headline-medium);
  line-height: var(--line-height-headline-medium);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.headline-small {
  font-family: var(--font-display);
  font-size: var(--text-headline-small);
  line-height: var(--line-height-headline-small);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.title-large {
  font-family: var(--font-text);
  font-size: var(--text-title-large);
  line-height: var(--line-height-title-large);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.title-medium {
  font-family: var(--font-text);
  font-size: var(--text-title-medium);
  line-height: var(--line-height-title-medium);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15px;
}

.title-small {
  font-family: var(--font-text);
  font-size: var(--text-title-small);
  line-height: var(--line-height-title-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1px;
}

.body-large {
  font-family: var(--font-text);
  font-size: var(--text-body-large);
  line-height: var(--line-height-body-large);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.5px;
}

.body-medium {
  font-family: var(--font-text);
  font-size: var(--text-body-medium);
  line-height: var(--line-height-body-medium);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.25px;
}

.body-small {
  font-family: var(--font-text);
  font-size: var(--text-body-small);
  line-height: var(--line-height-body-small);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.4px;
}

.label-large {
  font-family: var(--font-text);
  font-size: var(--text-label-large);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1px;
}

.label-medium {
  font-family: var(--font-text);
  font-size: var(--text-label-medium);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
}

.label-small {
  font-family: var(--font-text);
  font-size: var(--text-label-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 767px) {
  .container {
    padding: 0 var(--space-4);
  }
}



/* Base reset and typography */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--text-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--color-on-background);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  margin: 0 0 var(--space-4) 0;
  color: var(--color-on-surface);
}

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-on-surface-variant);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-variant);
}

img {
  max-width: 100%;
  height: auto;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-8);
  }
}