/* playbook-material-design-f5.md */

:root {
  /* Primary - Azul Google */
  --md-sys-color-primary: #4285f4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e8f0fe;
  --md-sys-color-on-primary-container: #001d35;
  
  /* Secondary - Verde Google */
  --md-sys-color-secondary: #34a853;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8f5e8;
  
  /* Surface & Background */
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-variant: #f8f9fa;
  --md-sys-color-surface-container-low: #fefbff;
  --md-sys-color-surface-container: #f3f4f6;
  --md-sys-color-surface-container-high: #e6e7e9;
  
  /* Text Colors */
  --md-sys-color-on-surface: #202124;
  --md-sys-color-on-surface-variant: #5f6368;
  --md-sys-color-outline: #dadce0;
  --md-sys-color-outline-variant: #e8eaed;
  
  /* Error - Vermelho Google */
  --md-sys-color-error: #ea4335;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fce8e6;
  
  /* Warning - Amarelo Google */
  --md-sys-color-warning: #fbbc04;
  --md-sys-color-on-warning: #000000;

  /* Tipografia Material Design 3 */
  --md-sys-typescale-display-large: 400 57px/64px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-display-medium: 400 45px/52px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-display-small: 400 36px/44px "Google Sans", system-ui, sans-serif;
  
  --md-sys-typescale-headline-large: 400 32px/40px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-headline-medium: 400 28px/36px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-headline-small: 400 24px/32px "Google Sans", system-ui, sans-serif;
  
  --md-sys-typescale-title-large: 400 22px/28px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-title-medium: 500 16px/24px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-title-small: 500 14px/20px "Google Sans", system-ui, sans-serif;
  
  --md-sys-typescale-body-large: 400 16px/24px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-body-medium: 400 14px/20px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-body-small: 400 12px/16px "Google Sans", system-ui, sans-serif;
  
  --md-sys-typescale-label-large: 500 14px/20px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-label-medium: 500 12px/16px "Google Sans", system-ui, sans-serif;
  --md-sys-typescale-label-small: 500 11px/16px "Google Sans", system-ui, sans-serif;

  /* Elevação e Sombras Material */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-level2: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3);
  --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px rgba(0,0,0,0.3);
  --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0,0,0,0.15), 0px 4px 4px rgba(0,0,0,0.3);

  /* Shape System Material */
  --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: 50%;
}