/* ============================================================
   Fischkarten — Color tokens
   A dark forest-green theme with bright water-cyan accents and
   a four-season accent set, drawn from the Fischkarten app.
   ============================================================ */
:root {
  /* ---- Brand greens (surfaces) ---------------------------- */
  --green-950: #0B160F;   /* deepest — app canvas */
  --green-900: #0F1E15;   /* base background */
  --green-850: #13261A;   /* raised panel */
  --green-800: #183020;   /* card fill */
  --green-700: #1F4029;   /* hover / elevated */
  --green-600: #2A5638;   /* line work on green */
  --green-500: #3C7A50;   /* muted green text */

  /* ---- Reed / taupe (practice + flashcard surfaces) ------- */
  --taupe-800: #423D37;   /* flashcard practice canvas */
  --taupe-700: #4F4A42;   /* home menu canvas */
  --taupe-600: #5E574E;   /* taupe answer slab */
  --taupe-100: #F6F2F8;   /* light recognition-card canvas */

  /* ---- Water cyan (primary accent) ------------------------ */
  --cyan-400: #54B6FF;
  --cyan-500: #1E9BFF;    /* PRIMARY — titles, borders, links */
  --cyan-600: #0F7FE0;
  --blue-600: #1B1BF5;    /* deep answer-pill blue */
  --blue-700: #1414C8;

  /* ---- Teal (section labels) ------------------------------ */
  --teal-300: #4FCBB4;
  --teal-500: #18A88E;    /* cursive section labels */
  --teal-600: #128573;

  /* ---- Season accents ------------------------------------- */
  --season-spring: #F2A6C0;  /* Frühling — pink   */
  --season-summer: #9ACD32;  /* Sommer   — lime   */
  --season-autumn: #F57C20;  /* Herbst   — orange */
  --season-winter: #7FD4F0;  /* Winter   — ice    */

  /* ---- Semantic status ------------------------------------ */
  --success: #4FBF6A;   /* correct answer */
  --danger:  #E5533C;   /* wrong answer   */
  --warning: #F5B341;

  /* ---- Neutral ink ---------------------------------------- */
  --ink-50:  #F4F1EA;   /* primary text on dark */
  --ink-200: #CFC9BD;   /* secondary text */
  --ink-400: #9A958A;   /* muted / captions */
  --ink-900: #21201C;   /* text on light surfaces */
  --white:   #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --bg-canvas:        var(--green-950);
  --bg-base:          var(--green-900);
  --surface-panel:    var(--green-850);
  --surface-card:     var(--green-800);
  --surface-raised:   var(--green-700);
  --surface-practice: var(--taupe-700);
  --surface-light:    var(--taupe-100);

  --border-accent:    var(--cyan-500);
  --border-subtle:    var(--green-600);

  --text-primary:     var(--ink-50);
  --text-secondary:   var(--ink-200);
  --text-muted:       var(--ink-400);
  --text-on-light:    var(--ink-900);
  --text-on-accent:   var(--white);

  --accent-primary:   var(--cyan-500);
  --accent-link:      var(--cyan-400);
  --accent-label:     var(--teal-500);
  --accent-answer:    var(--blue-600);
  --accent-warm:      var(--season-autumn);
}