@charset "UTF-8";

/*
  =========================================================
  COLOR AND DESIGN SETTINGS
  =========================================================
  Change colors here first. Most files use these variables.

  STYLE: black + grey + soft orange
  Goal:
  - calm grey background
  - black / dark charcoal text
  - warm orange accents
  - soft, lovely flashcards, not too bright

  How to use:
  - Hex colors look like #c8752d.
  - You can replace any value after the colon.
  - Save the file and refresh the browser with Ctrl + F5.
*/

:root{
  /* =====================================================
     1) MAIN SITE COLORS
     ===================================================== */

  --bg:#f3f1ed;                /* Whole page background. Warm light grey. */
  --surface:#fffdf9;           /* Main card/block background: level cards, topic cards, cookie block. */
  --surface2:#e9e5df;          /* Soft grey background: counters, option numbers, small UI elements. */
  --border:#d8d2c9;            /* Borders and divider lines. Soft warm grey. */

  --text:#171717;              /* Main text color: headings, German words, normal text. */
  --text2:#b66a2c;             /* Secondary text: subtitles, hints, descriptions, counters, footer text. Muted orange. */

  --accent:#c8752d;            /* Main accent: primary buttons, active tabs, links, quiz correct state. Soft orange. */
  --accent2:#2b2b2b;           /* Hover accent: dark charcoal for stronger contrast. */
  --accent-light:#f7eadb;      /* Light accent background: hover cards, correct answers, highlighted blocks. */

  --danger:#8f2f1f;            /* Error/wrong answer text and border. Deep muted red-brown. */
  --danger-light:#f4ded8;      /* Light error/wrong answer background. Soft and not bright. */

  --on-accent:#ffffff;         /* Text color on dark/orange button backgrounds. Usually white. */

  /* =====================================================
     2) BUTTON COLORS
     ===================================================== */

  --button-bg:var(--accent);                       
  --button-text:var(--on-accent);                  
  --button-hover-bg:#a85f24;                       
  --button-shadow:0 4px 16px rgba(168,95,36,.22);  

  --button-secondary-bg:var(--surface);            
  --button-secondary-text:var(--text);             
  --button-secondary-border:var(--border);         
  --button-secondary-hover-bg:#f3dfc8;             
  --button-secondary-hover-text:#9b541f;           

  /* =====================================================
     3) HEADER, NAVIGATION, AND FOOTER COLORS
     ===================================================== */

  --nav-text:#7b6f64;              
  --nav-hover-bg:#f3dfc8;          
  --nav-hover-text:#9b541f;        

  --footer-text:#8c8176;           
  --footer-strong:#171717;         
  --footer-link:#b66a2c;           
  --footer-link-hover:#2b2b2b;     

  /* =====================================================
     4) LEVEL CARDS AND TOPIC CARDS
     ===================================================== */

  --level-badge-color:#b66a2c;     
  --card-hover-border:#c8752d;     
  --card-hover-bg:#f7eadb;         
  --topic-arrow-color:#b66a2c;     

  /* =====================================================
     5) FLASHCARD COLORS
     ===================================================== */

  --flashcard-front-bg:#fffdf9;          
  --flashcard-front-text:#171717;        

  --flashcard-back-bg:#f1d6b8;           
  --flashcard-back-text:#2a2118;         
  --flashcard-back-small-text:rgba(42,33,24,.62); 

  /* =====================================================
     6) QUIZ, TEST, AND RESULT COLORS
     ===================================================== */

  --correct-bg:#f3dfc8;           
  --correct-text:#9b541f;         
  --wrong-bg:#f4ded8;             
  --wrong-text:#8f2f1f;           
  --result-score-color:#b66a2c;   
  --counter-bg:#e9e5df;           

  --listen-button-bg:#c8752d;                           
  --listen-button-text:#ffffff;                         
  --listen-button-shadow:0 4px 20px rgba(168,95,36,.24); 
  --listen-button-shadow-hover:0 6px 28px rgba(168,95,36,.32); 

  /* =====================================================
     7) COOKIE BLOCK COLORS
     ===================================================== */

  --cookie-bg:#fffdf9;            
  --cookie-text:#7b6f64;          
  --cookie-link:#b66a2c;          

  /* =====================================================
     8) SHAPE, SHADOW, FONTS, AND ANIMATION
     Usually you do not need to change these.
     ===================================================== */

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 2px 16px rgba(0,0,0,.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,.10);

  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;

  --tr:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
button{cursor:pointer;font-family:var(--font-body);border:none;background:none}
button:disabled{opacity:.55;cursor:not-allowed}
select{font-family:var(--font-body)}
a{color:inherit}
.is-hidden{display:none!important}