/* Themes */
html.default {
  /* Primärfarbe (Blau-Monochrom) */
  --color-primary-lightest: #B3F4FF;
  --color-primary-lighter:  #80E1FF;
  --color-primary-light:    #45D5FF;
  --color-primary:          #00BFFF;
  --color-primary-dark:     #008FCC;
  --color-primary-darker:   #006B99;
  --color-primary-darkest:  #004966;

  /* Statusfarben */
  --color-warning-light:    #FFD666;
  --color-warning:          #FFA500;
  --color-warning-dark:     #CC8400;

  --color-error-light:      #FF7F7F;
  --color-error:            #FF5555;
  --color-error-dark:       #CC4444;

  --color-success-light:    #66E1A1;
  --color-success:          #00C67C;
  --color-success-dark:     #009A60;

  /* Hintergründe & Flächen */
  --color-bg:               #0A0A0C;
  --color-surface:          #1A1A1E;
  --color-surface-alt:      #232329;
  --color-surface-alt2:     #2C2F36;

  /* Texte */
  --color-text-primary:     #F0F0F0;
  --color-text-secondary:   #A0A0A5;
  --color-text-muted:       #6B6B70;
  --color-text-on-primary:  #000000;

  /* Utility */
  --color-border:           #2C2F36;
  --color-shadow:           rgba(0, 191, 255, 0.1);
  --color-overlay:          rgba(0, 0, 0, 0.75);
  --color-highlight:        #FFFFFF;
}
html.midnightPurple {
  /* Primärfarbe (Lila-Monochrom) */
  --color-primary-lightest: #E3C4FF;
  --color-primary-lighter:  #B266FF;
  --color-primary-light:    #8A2BE2;
  --color-primary:          #8A2BE2;
  --color-primary-dark:     #5D1A9A;
  --color-primary-darker:   #41136F;
  --color-primary-darkest:  #2B0C4A;

  /* Statusfarben */
  --color-warning-light:    #FFE69D;
  --color-warning:          #FFC864;
  --color-warning-dark:     #CCA449;

  --color-error-light:      #E68A84;
  --color-error:            #D94F70;
  --color-error-dark:       #A33A53;

  --color-success-light:    #B3F3DA;
  --color-success:          #7DE6B3;
  --color-success-dark:     #4AA88C;

  /* Hintergründe & Flächen */
  --color-bg:               #0A0612;
  --color-surface:          #1A1123;
  --color-surface-alt:      #2A1D3C;
  --color-surface-alt2:     #3A2B4F;

  /* Texte */
  --color-text-primary:     #E6E0F5;
  --color-text-secondary:   #9B87B9;
  --color-text-muted:       #7A6698;
  --color-text-on-primary:  #000000;

  /* Utility */
  --color-border:           #3A2B4F;
  --color-shadow:           rgba(138, 43, 226, 0.1);
  --color-overlay:          rgba(10, 6, 18, 0.7);
  --color-highlight:        #FFFFFF;
}
html.emeraldForest {
  /* Primärfarbe (Grün-Monochrom) */
  --color-primary-lightest: #D9F9E7;
  --color-primary-lighter:  #A4EAB6;
  --color-primary-light:    #65E2A0;
  --color-primary:          #2ECC71;
  --color-primary-dark:     #219150;
  --color-primary-darker:   #1A6D40;
  --color-primary-darkest:  #114C2E;

  /* Statusfarben */
  --color-warning-light:    #FFE29A;
  --color-warning:          #FFB84D;
  --color-warning-dark:     #CC953F;

  --color-error-light:      #FF8888;
  --color-error:            #F45C5C;
  --color-error-dark:       #C44747;

  --color-success-light:    #87FFD6;
  --color-success:          #30FFB3;
  --color-success-dark:     #00A67C;

  /* Hintergründe & Flächen */
  --color-bg:               #07130D;
  --color-surface:          #12291D;
  --color-surface-alt:      #1D3B2C;
  --color-surface-alt2:     #2E5541;

  /* Texte */
  --color-text-primary:     #E3F5EB;
  --color-text-secondary:   #95BBA6;
  --color-text-muted:       #6F9980;
  --color-text-on-primary:  #000000;

  /* Utility */
  --color-border:           #2E5541;
  --color-shadow:           rgba(46, 204, 113, 0.12);
  --color-overlay:          rgba(5, 18, 11, 0.7);
  --color-highlight:        #FFFFFF;
}
html.techStyle {
  /* Primärfarbe (Blau-Grau) */
  --color-primary-lightest: #D4EAFE;
  --color-primary-lighter:  #A2CFFB;
  --color-primary-light:    #A2CBF0;
  --color-primary:          #5FA1D7;
  --color-primary-dark:     #3B6F9E;
  --color-primary-darker:   #2C4E75;
  --color-primary-darkest:  #1C2F4C;

  /* Statusfarben */
  --color-warning-light:    #FBE8AE;
  --color-warning:          #F0B760;
  --color-warning-dark:     #C48E4C;

  --color-error-light:      #E58F8F;
  --color-error:            #D66F6F;
  --color-error-dark:       #A64545;

  --color-success-light:    #95E3C9;
  --color-success:          #5AD3A6;
  --color-success-dark:     #3A8E6B;

  /* Hintergründe & Flächen */
  --color-bg:               #101419;
  --color-surface:          #1B2129;
  --color-surface-alt:      #262D38;
  --color-surface-alt2:     #37404B;

  /* Texte */
  --color-text-primary:     #D6DDE3;
  --color-text-secondary:   #9CA7B1;
  --color-text-muted:       #6F7A82;
  --color-text-on-primary:  #000000;

  /* Utility */
  --color-border:           #37404B;
  --color-shadow:           rgba(95, 161, 215, 0.15);
  --color-overlay:          rgba(16, 20, 25, 0.65);
  --color-highlight:        #FFFFFF;
}
html.iceScape {
  /* Primärfarbe (Hellblau-Monochrom) */
  --color-primary-lightest: #E7F8FF;
  --color-primary-lighter:  #C4F2FF;
  --color-primary-light:    #D1F3FF;
  --color-primary:          #A1DFFB;
  --color-primary-dark:     #7AC8E3;
  --color-primary-darker:   #5299B3;
  --color-primary-darkest:  #2D6381;

  /* Statusfarben */
  --color-warning-light:    #FFD6A7;
  --color-warning:          #FFAF5A;
  --color-warning-dark:     #CC8B46;

  --color-error-light:      #EB7F7C;
  --color-error:            #D9534F;
  --color-error-dark:       #A33838;

  --color-success-light:    #88F3A2;
  --color-success:          #2ECC71;
  --color-success-dark:     #229961;

  /* Hintergründe & Flächen */
  --color-bg:               #F5FAFC;
  --color-surface:          #E6F1F6;
  --color-surface-alt:      #D3E4EC;
  --color-surface-alt2:     #B3CCD8;

  /* Texte */
  --color-text-primary:     #1A1A1E;
  --color-text-secondary:   #5A6E79;
  --color-text-muted:       #32414A;
  --color-text-on-primary:  #FFFFFF;

  /* Utility */
  --color-border:           #B3CCD8;
  --color-shadow:           rgba(0, 119, 170, 0.08);
  --color-overlay:          rgba(245, 250, 252, 0.6);
  --color-highlight:        #0077AA;
}
html.midNight {
  /* Primärfarbe (Gleicher Blauton wie default) */
  --color-primary-lightest: #B3F4FF;
  --color-primary-lighter:  #80E1FF;
  --color-primary-light:    #45D5FF;
  --color-primary:          #00BFFF;
  --color-primary-dark:     #008FCC;
  --color-primary-darker:   #006B99;
  --color-primary-darkest:  #004966;

  /* Statusfarben */
  --color-warning-light:    #FFB54D;
  --color-warning:          #FF8800;
  --color-warning-dark:     #CC7000;

  --color-error-light:      #E58080;
  --color-error:            #CC4444;
  --color-error-dark:       #991111;

  --color-success-light:    #80E8C6;
  --color-success:          #2ED897;
  --color-success-dark:     #1F8E88;

  /* Hintergründe & Flächen */
  --color-bg:               #030303;
  --color-surface:          #0D0D0F;
  --color-surface-alt:      #151518;
  --color-surface-alt2:     #1E1E22;

  /* Texte */
  --color-text-primary:     #CCCCCC;
  --color-text-secondary:   #777777;
  --color-text-muted:       #555555;
  --color-text-on-primary:  #000000;

  /* Utility */
  --color-border:           #1E1E22;
  --color-shadow:           rgba(0, 191, 255, 0.08);
  --color-overlay:          rgba(0, 0, 0, 0.85);
  --color-highlight:        #FFFFFF;
}
html.fieryRed {
  /* Primärfarbe (Rot-Monochrom) */
  --color-primary-lightest: #FFE5E5;
  --color-primary-lighter:  #FF8484;
  --color-primary-light:    #FF6B6B;
  --color-primary:          #FF3B3B;
  --color-primary-dark:     #B02B2B;
  --color-primary-darker:   #801F1F;
  --color-primary-darkest:  #501515;

  /* Statusfarben */
  --color-warning-light:    #FFE89D;
  --color-warning:          #FFD166;
  --color-warning-dark:     #CCA754;

  --color-error-light:      #FF7373;
  --color-error:            #FF4444;
  --color-error-dark:       #CC3333;

  --color-success-light:    #BFF8DF;
  --color-success:          #8DF2C1;
  --color-success-dark:     #5FC693;

  /* Hintergründe & Flächen */
  --color-bg:               #120606;
  --color-surface:          #1F0B0B;
  --color-surface-alt:      #2C1010;
  --color-surface-alt2:     #3A1616;

  /* Texte */
  --color-text-primary:     #F5DADA;
  --color-text-secondary:   #C48888;
  --color-text-muted:       #9A5A5A;
  --color-text-on-primary:  #000000;

  /* Utility */
  --color-border:           #3A1616;
  --color-shadow:           rgba(255, 59, 59, 0.1);
  --color-overlay:          rgba(18, 6, 6, 0.8);
  --color-highlight:        #FFFFFF;
}
html.sunsetDusk {
  /* Primärfarbe (Sonnenuntergang) */
  --color-primary-lightest:  #FFDFDE;
  --color-primary-lighter:   #FFB7B6;
  --color-primary-light:     #FF8A89;
  --color-primary:           #FF5E62;
  --color-primary-dark:      #CC4A4C;
  --color-primary-darker:    #99353A;
  --color-primary-darkest:   #662326;

  /* Statusfarben */
  --color-warning-light:     #FFE29A;
  --color-warning:           #FFD100;
  --color-warning-dark:      #CCAA00;

  --color-error-light:       #FFA3A3;
  --color-error:             #FF4E4E;
  --color-error-dark:        #CC3B3B;

  --color-success-light:     #B8FFC8;
  --color-success:           #6CEA8E;
  --color-success-dark:      #4AAE63;

  /* Hintergründe & Flächen */
  --color-bg:                #1E0D22;
  --color-surface:           #2A162F;
  --color-surface-alt:       #3B2042;
  --color-surface-alt2:      #4C2C55;

  /* Texte */
  --color-text-primary:      #F8EDEB;
  --color-text-secondary:    #E1C4C2;
  --color-text-muted:        #B99D9C;
  --color-text-on-primary:   #000000;

  /* Utility */
  --color-border:            #3B2042;
  --color-shadow:            rgba(255, 94, 98, 0.1);
  --color-overlay:           rgba(30, 13, 34, 0.8);
  --color-highlight:         #FFB7B6;
}
html.cyberNeon {
  /* Primärfarbe (Neonblau) */
  --color-primary-lightest:  #CCFFFF;
  --color-primary-lighter:   #99FFFF;
  --color-primary-light:     #66FFFF;
  --color-primary:           #00F0FF;
  --color-primary-dark:      #00CCCC;
  --color-primary-darker:    #009999;
  --color-primary-darkest:   #006666;

  /* Statusfarben */
  --color-warning-light:     #FFE997;
  --color-warning:           #FFD700;
  --color-warning-dark:      #CCAC00;

  --color-error-light:       #FF8080;
  --color-error:             #FF3333;
  --color-error-dark:        #CC2929;

  --color-success-light:     #B8FF9E;
  --color-success:           #39FF14;
  --color-success-dark:      #2CBF10;

  /* Hintergründe & Flächen */
  --color-bg:                #0A0A0A;
  --color-surface:           #111111;
  --color-surface-alt:       #1A1A1A;
  --color-surface-alt2:      #242424;

  /* Texte */
  --color-text-primary:      #E0E0E0;
  --color-text-secondary:    #B0B0B0;
  --color-text-muted:        #707070;
  --color-text-on-primary:   #000000;

  /* Utility */
  --color-border:            #242424;
  --color-shadow:            rgba(0, 240, 255, 0.15);
  --color-overlay:           rgba(10, 10, 10, 0.85);
  --color-highlight:         #66FFFF;
}

/* Fonts */
@font-face {
  font-family: FiraCode;
  src: url('/fonts/FiraCode.ttf');
}
@font-face {
  font-family: Inter_Italic;
  src: url('/fonts/Inter_Italic.ttf');
}
@font-face {
  font-family: Inter;
  src: url('/fonts/Inter.ttf');
}
@font-face {
  font-family: Orbitron;
  src: url('/fonts/Orbitron.ttf');
}
@font-face {
  font-family: SpaceMono_Bold;
  src: url('/fonts/SpaceMono_Bold.ttf');
}
@font-face {
  font-family: SpaceMono_Italic;
  src: url('/fonts/SpaceMono_Italic.ttf');
}
@font-face {
  font-family: SpaceMono;
  src: url('/fonts/SpaceMono.ttf');
}