/* Material Design 3 Theme Tokens
  Primary Brand Color: #FD5A1E (Vibrant Orange)
*/

:root {
  /* --- LIGHT THEME --- */
  --md-sys-color-primary: #a93700;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffdbcf;
  --md-sys-color-on-primary-container: #370c00;
  
  --md-sys-color-secondary: #77574d;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffdbcf;
  --md-sys-color-on-secondary-container: #2c150e;
  
  --md-sys-color-tertiary: #6b5d2e;
  --md-sys-color-on-tertiary: #ffffff;
  
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  
  --md-sys-color-background: #fffbff;
  --md-sys-color-on-background: #201a18;
  --md-sys-color-surface: #fffbff;
  --md-sys-color-on-surface: #201a18;
  --md-sys-color-surface-variant: #f5ded7;
  --md-sys-color-on-surface-variant: #53433f;
  --md-sys-color-outline: #85736e;

  /* Typography */
  --md-sys-typescale-body-medium-font: "Inter", system-ui, sans-serif;
}

html.dark-mode {
    /* --- DARK THEME --- */
    --md-sys-color-primary: #ffb59a;
    --md-sys-color-on-primary: #5b1a00;
    --md-sys-color-primary-container: #812800;
    --md-sys-color-on-primary-container: #ffdbcf;
    
    --md-sys-color-secondary: #e7bdb1;
    --md-sys-color-on-secondary: #442a22;
    --md-sys-color-secondary-container: #5d4037;
    --md-sys-color-on-secondary-container: #ffdbcf;
    
    --md-sys-color-background: #201a18;
    --md-sys-color-on-background: #ede0db;
    --md-sys-color-surface: #201a18;
    --md-sys-color-on-surface: #ede0db;
    --md-sys-color-surface-variant: #53433f;
    --md-sys-color-on-surface-variant: #d8c2bb;
    --md-sys-color-outline: #a08d87;

    /* Surface Containers (Used by md-menu, md-dialog, etc) */
    --md-sys-color-surface-container-lowest: #0d0908;
    --md-sys-color-surface-container-low: #1b1311;
    --md-sys-color-surface-container: #201a18;
    --md-sys-color-surface-container-high: #2b2320;
    --md-sys-color-surface-container-highest: #372d29;
  }