@charset "UTF-8";
/*
 * Radix‑Bootstrap Theme (v2)
 *
 * This stylesheet rebuilds the previous Radix‑Bootstrap integration by
 * combining the Radix colour system and radii with Bootstrap 5.3’s new
 * colour modes API【219644060375250†L302-L340】.  The goal is to reproduce
 * as closely as possible the look of the Radix Themes playground for a
 * green accent and full border radius while staying compatible with
 * Bootstrap’s variables and JavaScript components.  All styles live in
 * CSS only – no JavaScript is required for these primitives – but
 * Bootstrap’s JS bundle can still be used for components like tooltips
 * and dialogs.
 */

/* -------------------------------------------------------------------------
 * 1. Radix colour scales and surface tokens
 *
 * Define the green and gray palettes from Radix Colours for both
 * light and dark appearances.  The variables in :root serve as the
 * default (light) values, while the `[data-bs-theme="dark"]` selector
 * overrides them for dark mode.  Colour values were taken from the
 * official Radix palette documentation【751562973422322†L1-L12】【195427763297846†L1-L12】.
 */

:root {
  /* Green scale (light) */
  --green-1:  #fbfefc;
  --green-2:  #f4fbf6;
  --green-3:  #e6f6eb;
  --green-4:  #d6f1df;
  --green-5:  #c4e8d1;
  --green-6:  #adddc0;
  --green-7:  #8eceaa;
  --green-8:  #5bb98b;
  --green-9:  #30a46c; /* solid fills */
  --green-10: #2b9a66;
  --green-11: #218358; /* accessible text on green backgrounds */
  --green-12: #193b2d;

  /* Gray scale (light) */
  --gray-1:  #fcfcfc;
  --gray-2:  #f9f9f9;
  --gray-3:  #f0f0f0;
  --gray-4:  #e8e8e8;
  --gray-5:  #e0e0e0;
  --gray-6:  #d9d9d9;
  --gray-7:  #cecece;
  --gray-8:  #bbbbbb;
  --gray-9:  #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;

  /* Surface and overlay colours for light mode */
  --color-background: var(--gray-1);
  --color-panel-solid: var(--gray-2);
  --color-panel-translucent: rgba(255, 255, 255, 0.7);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-surface: rgba(255, 255, 255, 0.85);

  /* Radius scale */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 16px;
  --radius-full: 9999px;

  /* Shadows (light) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-5: 0 12px 40px rgba(0, 0, 0, 0.25);

  /* Radix colour scales.  We approximate each of the Radix colour families
   * using CSS colour mixing.  Each family defines a `--<name>-base`
   * variable that represents the step 9 of the scale, and then creates
   * twelve step variables by mixing the base colour with white or black
   * in increasing amounts.  See https://www.radix-ui.com/colors for the
   * original colour palette definitions【4241225091315†L20-L49】.  The accent
   * remains green, but these variables allow other scales to be used via
   * utility classes.
   */

  /* Neutral and metallic tones */
  --gray-base:   #6e7781;
  --gold-base:   #978365;
  --bronze-base: #a47e6b;
  --brown-base:  #ad7f58;

  /* Warm colours */
  --yellow-base: #f0b90b;
  --amber-base:  #ffb224;
  --orange-base: #ff801f;
  --tomato-base: #e54d2e;
  --red-base:    #e5484d;
  --ruby-base:   #e54666;
  --crimson-base:#e93d82;
  --pink-base:   #d6409f;

  /* Cool colours */
  --plum-base:   #ab4aba;
  --purple-base: #8e4ec6;
  --violet-base: #8145fc;
  --iris-base:   #5c5dfc;
  --indigo-base: #3e63dd;
  --blue-base:   #0091ff;
  --cyan-base:   #00c2d7;
  --teal-base:   #12a594;

  /* Natural greens and others */
  --jade-base:   #29a383;
  --grass-base:  #46a758;
  --lime-base:   #bdee63;
  --mint-base:   #86ead4;
  --sky-base:    #7ce2fe;

  /* Additional neutral scales not previously defined */
  --mauve-base:  #7d6b9d;
  --slate-base:  #708090;
  --sage-base:   #76956b;
  --olive-base:  #6b732a;
  --sand-base:   #d8c3a5;


  /* Generate step variables for each base.  Each step 1–8 mixes white into
   * the base colour; step 9 is the base itself; steps 10–12 mix black. */

  /* Mauve scale */
  --mauve-1:  color-mix(in srgb, #ffffff 95%, var(--mauve-base) 5%);
  --mauve-2:  color-mix(in srgb, #ffffff 90%, var(--mauve-base) 10%);
  --mauve-3:  color-mix(in srgb, #ffffff 82%, var(--mauve-base) 18%);
  --mauve-4:  color-mix(in srgb, #ffffff 74%, var(--mauve-base) 26%);
  --mauve-5:  color-mix(in srgb, #ffffff 65%, var(--mauve-base) 35%);
  --mauve-6:  color-mix(in srgb, #ffffff 55%, var(--mauve-base) 45%);
  --mauve-7:  color-mix(in srgb, #ffffff 43%, var(--mauve-base) 57%);
  --mauve-8:  color-mix(in srgb, #ffffff 30%, var(--mauve-base) 70%);
  --mauve-9:  var(--mauve-base);
  --mauve-10: color-mix(in srgb, #000000 10%, var(--mauve-base) 90%);
  --mauve-11: color-mix(in srgb, #000000 20%, var(--mauve-base) 80%);
  --mauve-12: color-mix(in srgb, #000000 50%, var(--mauve-base) 50%);

  /* Slate scale */
  --slate-1:  color-mix(in srgb, #ffffff 95%, var(--slate-base) 5%);
  --slate-2:  color-mix(in srgb, #ffffff 90%, var(--slate-base) 10%);
  --slate-3:  color-mix(in srgb, #ffffff 82%, var(--slate-base) 18%);
  --slate-4:  color-mix(in srgb, #ffffff 74%, var(--slate-base) 26%);
  --slate-5:  color-mix(in srgb, #ffffff 65%, var(--slate-base) 35%);
  --slate-6:  color-mix(in srgb, #ffffff 55%, var(--slate-base) 45%);
  --slate-7:  color-mix(in srgb, #ffffff 43%, var(--slate-base) 57%);
  --slate-8:  color-mix(in srgb, #ffffff 30%, var(--slate-base) 70%);
  --slate-9:  var(--slate-base);
  --slate-10: color-mix(in srgb, #000000 10%, var(--slate-base) 90%);
  --slate-11: color-mix(in srgb, #000000 20%, var(--slate-base) 80%);
  --slate-12: color-mix(in srgb, #000000 50%, var(--slate-base) 50%);

  /* Sage scale */
  --sage-1:  color-mix(in srgb, #ffffff 95%, var(--sage-base) 5%);
  --sage-2:  color-mix(in srgb, #ffffff 90%, var(--sage-base) 10%);
  --sage-3:  color-mix(in srgb, #ffffff 82%, var(--sage-base) 18%);
  --sage-4:  color-mix(in srgb, #ffffff 74%, var(--sage-base) 26%);
  --sage-5:  color-mix(in srgb, #ffffff 65%, var(--sage-base) 35%);
  --sage-6:  color-mix(in srgb, #ffffff 55%, var(--sage-base) 45%);
  --sage-7:  color-mix(in srgb, #ffffff 43%, var(--sage-base) 57%);
  --sage-8:  color-mix(in srgb, #ffffff 30%, var(--sage-base) 70%);
  --sage-9:  var(--sage-base);
  --sage-10: color-mix(in srgb, #000000 10%, var(--sage-base) 90%);
  --sage-11: color-mix(in srgb, #000000 20%, var(--sage-base) 80%);
  --sage-12: color-mix(in srgb, #000000 50%, var(--sage-base) 50%);

  /* Olive scale */
  --olive-1:  color-mix(in srgb, #ffffff 95%, var(--olive-base) 5%);
  --olive-2:  color-mix(in srgb, #ffffff 90%, var(--olive-base) 10%);
  --olive-3:  color-mix(in srgb, #ffffff 82%, var(--olive-base) 18%);
  --olive-4:  color-mix(in srgb, #ffffff 74%, var(--olive-base) 26%);
  --olive-5:  color-mix(in srgb, #ffffff 65%, var(--olive-base) 35%);
  --olive-6:  color-mix(in srgb, #ffffff 55%, var(--olive-base) 45%);
  --olive-7:  color-mix(in srgb, #ffffff 43%, var(--olive-base) 57%);
  --olive-8:  color-mix(in srgb, #ffffff 30%, var(--olive-base) 70%);
  --olive-9:  var(--olive-base);
  --olive-10: color-mix(in srgb, #000000 10%, var(--olive-base) 90%);
  --olive-11: color-mix(in srgb, #000000 20%, var(--olive-base) 80%);
  --olive-12: color-mix(in srgb, #000000 50%, var(--olive-base) 50%);

  /* Sand scale */
  --sand-1:  color-mix(in srgb, #ffffff 95%, var(--sand-base) 5%);
  --sand-2:  color-mix(in srgb, #ffffff 90%, var(--sand-base) 10%);
  --sand-3:  color-mix(in srgb, #ffffff 82%, var(--sand-base) 18%);
  --sand-4:  color-mix(in srgb, #ffffff 74%, var(--sand-base) 26%);
  --sand-5:  color-mix(in srgb, #ffffff 65%, var(--sand-base) 35%);
  --sand-6:  color-mix(in srgb, #ffffff 55%, var(--sand-base) 45%);
  --sand-7:  color-mix(in srgb, #ffffff 43%, var(--sand-base) 57%);
  --sand-8:  color-mix(in srgb, #ffffff 30%, var(--sand-base) 70%);
  --sand-9:  var(--sand-base);
  --sand-10: color-mix(in srgb, #000000 10%, var(--sand-base) 90%);
  --sand-11: color-mix(in srgb, #000000 20%, var(--sand-base) 80%);
  --sand-12: color-mix(in srgb, #000000 50%, var(--sand-base) 50%);
  /* Gray scale */
  --gray-1:  color-mix(in srgb, #ffffff 95%, var(--gray-base) 5%);
  --gray-2:  color-mix(in srgb, #ffffff 90%, var(--gray-base) 10%);
  --gray-3:  color-mix(in srgb, #ffffff 82%, var(--gray-base) 18%);
  --gray-4:  color-mix(in srgb, #ffffff 74%, var(--gray-base) 26%);
  --gray-5:  color-mix(in srgb, #ffffff 65%, var(--gray-base) 35%);
  --gray-6:  color-mix(in srgb, #ffffff 55%, var(--gray-base) 45%);
  --gray-7:  color-mix(in srgb, #ffffff 43%, var(--gray-base) 57%);
  --gray-8:  color-mix(in srgb, #ffffff 30%, var(--gray-base) 70%);
  --gray-9:  var(--gray-base);
  --gray-10: color-mix(in srgb, #000000 10%, var(--gray-base) 90%);
  --gray-11: color-mix(in srgb, #000000 20%, var(--gray-base) 80%);
  --gray-12: color-mix(in srgb, #000000 50%, var(--gray-base) 50%);

  /* Gold scale */
  --gold-1:  color-mix(in srgb, #ffffff 95%, var(--gold-base) 5%);
  --gold-2:  color-mix(in srgb, #ffffff 90%, var(--gold-base) 10%);
  --gold-3:  color-mix(in srgb, #ffffff 82%, var(--gold-base) 18%);
  --gold-4:  color-mix(in srgb, #ffffff 74%, var(--gold-base) 26%);
  --gold-5:  color-mix(in srgb, #ffffff 65%, var(--gold-base) 35%);
  --gold-6:  color-mix(in srgb, #ffffff 55%, var(--gold-base) 45%);
  --gold-7:  color-mix(in srgb, #ffffff 43%, var(--gold-base) 57%);
  --gold-8:  color-mix(in srgb, #ffffff 30%, var(--gold-base) 70%);
  --gold-9:  var(--gold-base);
  --gold-10: color-mix(in srgb, #000000 10%, var(--gold-base) 90%);
  --gold-11: color-mix(in srgb, #000000 20%, var(--gold-base) 80%);
  --gold-12: color-mix(in srgb, #000000 50%, var(--gold-base) 50%);

  /* Bronze scale */
  --bronze-1:  color-mix(in srgb, #ffffff 95%, var(--bronze-base) 5%);
  --bronze-2:  color-mix(in srgb, #ffffff 90%, var(--bronze-base) 10%);
  --bronze-3:  color-mix(in srgb, #ffffff 82%, var(--bronze-base) 18%);
  --bronze-4:  color-mix(in srgb, #ffffff 74%, var(--bronze-base) 26%);
  --bronze-5:  color-mix(in srgb, #ffffff 65%, var(--bronze-base) 35%);
  --bronze-6:  color-mix(in srgb, #ffffff 55%, var(--bronze-base) 45%);
  --bronze-7:  color-mix(in srgb, #ffffff 43%, var(--bronze-base) 57%);
  --bronze-8:  color-mix(in srgb, #ffffff 30%, var(--bronze-base) 70%);
  --bronze-9:  var(--bronze-base);
  --bronze-10: color-mix(in srgb, #000000 10%, var(--bronze-base) 90%);
  --bronze-11: color-mix(in srgb, #000000 20%, var(--bronze-base) 80%);
  --bronze-12: color-mix(in srgb, #000000 50%, var(--bronze-base) 50%);

  /* Brown scale */
  --brown-1:  color-mix(in srgb, #ffffff 95%, var(--brown-base) 5%);
  --brown-2:  color-mix(in srgb, #ffffff 90%, var(--brown-base) 10%);
  --brown-3:  color-mix(in srgb, #ffffff 82%, var(--brown-base) 18%);
  --brown-4:  color-mix(in srgb, #ffffff 74%, var(--brown-base) 26%);
  --brown-5:  color-mix(in srgb, #ffffff 65%, var(--brown-base) 35%);
  --brown-6:  color-mix(in srgb, #ffffff 55%, var(--brown-base) 45%);
  --brown-7:  color-mix(in srgb, #ffffff 43%, var(--brown-base) 57%);
  --brown-8:  color-mix(in srgb, #ffffff 30%, var(--brown-base) 70%);
  --brown-9:  var(--brown-base);
  --brown-10: color-mix(in srgb, #000000 10%, var(--brown-base) 90%);
  --brown-11: color-mix(in srgb, #000000 20%, var(--brown-base) 80%);
  --brown-12: color-mix(in srgb, #000000 50%, var(--brown-base) 50%);

  /* Yellow scale */
  --yellow-1:  color-mix(in srgb, #ffffff 95%, var(--yellow-base) 5%);
  --yellow-2:  color-mix(in srgb, #ffffff 90%, var(--yellow-base) 10%);
  --yellow-3:  color-mix(in srgb, #ffffff 82%, var(--yellow-base) 18%);
  --yellow-4:  color-mix(in srgb, #ffffff 74%, var(--yellow-base) 26%);
  --yellow-5:  color-mix(in srgb, #ffffff 65%, var(--yellow-base) 35%);
  --yellow-6:  color-mix(in srgb, #ffffff 55%, var(--yellow-base) 45%);
  --yellow-7:  color-mix(in srgb, #ffffff 43%, var(--yellow-base) 57%);
  --yellow-8:  color-mix(in srgb, #ffffff 30%, var(--yellow-base) 70%);
  --yellow-9:  var(--yellow-base);
  --yellow-10: color-mix(in srgb, #000000 10%, var(--yellow-base) 90%);
  --yellow-11: color-mix(in srgb, #000000 20%, var(--yellow-base) 80%);
  --yellow-12: color-mix(in srgb, #000000 50%, var(--yellow-base) 50%);

  /* Amber scale */
  --amber-1:  color-mix(in srgb, #ffffff 95%, var(--amber-base) 5%);
  --amber-2:  color-mix(in srgb, #ffffff 90%, var(--amber-base) 10%);
  --amber-3:  color-mix(in srgb, #ffffff 82%, var(--amber-base) 18%);
  --amber-4:  color-mix(in srgb, #ffffff 74%, var(--amber-base) 26%);
  --amber-5:  color-mix(in srgb, #ffffff 65%, var(--amber-base) 35%);
  --amber-6:  color-mix(in srgb, #ffffff 55%, var(--amber-base) 45%);
  --amber-7:  color-mix(in srgb, #ffffff 43%, var(--amber-base) 57%);
  --amber-8:  color-mix(in srgb, #ffffff 30%, var(--amber-base) 70%);
  --amber-9:  var(--amber-base);
  --amber-10: color-mix(in srgb, #000000 10%, var(--amber-base) 90%);
  --amber-11: color-mix(in srgb, #000000 20%, var(--amber-base) 80%);
  --amber-12: color-mix(in srgb, #000000 50%, var(--amber-base) 50%);

  /* Orange scale */
  --orange-1:  color-mix(in srgb, #ffffff 95%, var(--orange-base) 5%);
  --orange-2:  color-mix(in srgb, #ffffff 90%, var(--orange-base) 10%);
  --orange-3:  color-mix(in srgb, #ffffff 82%, var(--orange-base) 18%);
  --orange-4:  color-mix(in srgb, #ffffff 74%, var(--orange-base) 26%);
  --orange-5:  color-mix(in srgb, #ffffff 65%, var(--orange-base) 35%);
  --orange-6:  color-mix(in srgb, #ffffff 55%, var(--orange-base) 45%);
  --orange-7:  color-mix(in srgb, #ffffff 43%, var(--orange-base) 57%);
  --orange-8:  color-mix(in srgb, #ffffff 30%, var(--orange-base) 70%);
  --orange-9:  var(--orange-base);
  --orange-10: color-mix(in srgb, #000000 10%, var(--orange-base) 90%);
  --orange-11: color-mix(in srgb, #000000 20%, var(--orange-base) 80%);
  --orange-12: color-mix(in srgb, #000000 50%, var(--orange-base) 50%);

  /* Tomato scale */
  --tomato-1:  color-mix(in srgb, #ffffff 95%, var(--tomato-base) 5%);
  --tomato-2:  color-mix(in srgb, #ffffff 90%, var(--tomato-base) 10%);
  --tomato-3:  color-mix(in srgb, #ffffff 82%, var(--tomato-base) 18%);
  --tomato-4:  color-mix(in srgb, #ffffff 74%, var(--tomato-base) 26%);
  --tomato-5:  color-mix(in srgb, #ffffff 65%, var(--tomato-base) 35%);
  --tomato-6:  color-mix(in srgb, #ffffff 55%, var(--tomato-base) 45%);
  --tomato-7:  color-mix(in srgb, #ffffff 43%, var(--tomato-base) 57%);
  --tomato-8:  color-mix(in srgb, #ffffff 30%, var(--tomato-base) 70%);
  --tomato-9:  var(--tomato-base);
  --tomato-10: color-mix(in srgb, #000000 10%, var(--tomato-base) 90%);
  --tomato-11: color-mix(in srgb, #000000 20%, var(--tomato-base) 80%);
  --tomato-12: color-mix(in srgb, #000000 50%, var(--tomato-base) 50%);

  /* Red scale */
  --red-1:  color-mix(in srgb, #ffffff 95%, var(--red-base) 5%);
  --red-2:  color-mix(in srgb, #ffffff 90%, var(--red-base) 10%);
  --red-3:  color-mix(in srgb, #ffffff 82%, var(--red-base) 18%);
  --red-4:  color-mix(in srgb, #ffffff 74%, var(--red-base) 26%);
  --red-5:  color-mix(in srgb, #ffffff 65%, var(--red-base) 35%);
  --red-6:  color-mix(in srgb, #ffffff 55%, var(--red-base) 45%);
  --red-7:  color-mix(in srgb, #ffffff 43%, var(--red-base) 57%);
  --red-8:  color-mix(in srgb, #ffffff 30%, var(--red-base) 70%);
  --red-9:  var(--red-base);
  --red-10: color-mix(in srgb, #000000 10%, var(--red-base) 90%);
  --red-11: color-mix(in srgb, #000000 20%, var(--red-base) 80%);
  --red-12: color-mix(in srgb, #000000 50%, var(--red-base) 50%);

  /* Ruby scale */
  --ruby-1:  color-mix(in srgb, #ffffff 95%, var(--ruby-base) 5%);
  --ruby-2:  color-mix(in srgb, #ffffff 90%, var(--ruby-base) 10%);
  --ruby-3:  color-mix(in srgb, #ffffff 82%, var(--ruby-base) 18%);
  --ruby-4:  color-mix(in srgb, #ffffff 74%, var(--ruby-base) 26%);
  --ruby-5:  color-mix(in srgb, #ffffff 65%, var(--ruby-base) 35%);
  --ruby-6:  color-mix(in srgb, #ffffff 55%, var(--ruby-base) 45%);
  --ruby-7:  color-mix(in srgb, #ffffff 43%, var(--ruby-base) 57%);
  --ruby-8:  color-mix(in srgb, #ffffff 30%, var(--ruby-base) 70%);
  --ruby-9:  var(--ruby-base);
  --ruby-10: color-mix(in srgb, #000000 10%, var(--ruby-base) 90%);
  --ruby-11: color-mix(in srgb, #000000 20%, var(--ruby-base) 80%);
  --ruby-12: color-mix(in srgb, #000000 50%, var(--ruby-base) 50%);

  /* Crimson scale */
  --crimson-1:  color-mix(in srgb, #ffffff 95%, var(--crimson-base) 5%);
  --crimson-2:  color-mix(in srgb, #ffffff 90%, var(--crimson-base) 10%);
  --crimson-3:  color-mix(in srgb, #ffffff 82%, var(--crimson-base) 18%);
  --crimson-4:  color-mix(in srgb, #ffffff 74%, var(--crimson-base) 26%);
  --crimson-5:  color-mix(in srgb, #ffffff 65%, var(--crimson-base) 35%);
  --crimson-6:  color-mix(in srgb, #ffffff 55%, var(--crimson-base) 45%);
  --crimson-7:  color-mix(in srgb, #ffffff 43%, var(--crimson-base) 57%);
  --crimson-8:  color-mix(in srgb, #ffffff 30%, var(--crimson-base) 70%);
  --crimson-9:  var(--crimson-base);
  --crimson-10: color-mix(in srgb, #000000 10%, var(--crimson-base) 90%);
  --crimson-11: color-mix(in srgb, #000000 20%, var(--crimson-base) 80%);
  --crimson-12: color-mix(in srgb, #000000 50%, var(--crimson-base) 50%);

  /* Pink scale */
  --pink-1:  color-mix(in srgb, #ffffff 95%, var(--pink-base) 5%);
  --pink-2:  color-mix(in srgb, #ffffff 90%, var(--pink-base) 10%);
  --pink-3:  color-mix(in srgb, #ffffff 82%, var(--pink-base) 18%);
  --pink-4:  color-mix(in srgb, #ffffff 74%, var(--pink-base) 26%);
  --pink-5:  color-mix(in srgb, #ffffff 65%, var(--pink-base) 35%);
  --pink-6:  color-mix(in srgb, #ffffff 55%, var(--pink-base) 45%);
  --pink-7:  color-mix(in srgb, #ffffff 43%, var(--pink-base) 57%);
  --pink-8:  color-mix(in srgb, #ffffff 30%, var(--pink-base) 70%);
  --pink-9:  var(--pink-base);
  --pink-10: color-mix(in srgb, #000000 10%, var(--pink-base) 90%);
  --pink-11: color-mix(in srgb, #000000 20%, var(--pink-base) 80%);
  --pink-12: color-mix(in srgb, #000000 50%, var(--pink-base) 50%);

  /* Plum scale */
  --plum-1:  color-mix(in srgb, #ffffff 95%, var(--plum-base) 5%);
  --plum-2:  color-mix(in srgb, #ffffff 90%, var(--plum-base) 10%);
  --plum-3:  color-mix(in srgb, #ffffff 82%, var(--plum-base) 18%);
  --plum-4:  color-mix(in srgb, #ffffff 74%, var(--plum-base) 26%);
  --plum-5:  color-mix(in srgb, #ffffff 65%, var(--plum-base) 35%);
  --plum-6:  color-mix(in srgb, #ffffff 55%, var(--plum-base) 45%);
  --plum-7:  color-mix(in srgb, #ffffff 43%, var(--plum-base) 57%);
  --plum-8:  color-mix(in srgb, #ffffff 30%, var(--plum-base) 70%);
  --plum-9:  var(--plum-base);
  --plum-10: color-mix(in srgb, #000000 10%, var(--plum-base) 90%);
  --plum-11: color-mix(in srgb, #000000 20%, var(--plum-base) 80%);
  --plum-12: color-mix(in srgb, #000000 50%, var(--plum-base) 50%);

  /* Purple scale */
  --purple-1:  color-mix(in srgb, #ffffff 95%, var(--purple-base) 5%);
  --purple-2:  color-mix(in srgb, #ffffff 90%, var(--purple-base) 10%);
  --purple-3:  color-mix(in srgb, #ffffff 82%, var(--purple-base) 18%);
  --purple-4:  color-mix(in srgb, #ffffff 74%, var(--purple-base) 26%);
  --purple-5:  color-mix(in srgb, #ffffff 65%, var(--purple-base) 35%);
  --purple-6:  color-mix(in srgb, #ffffff 55%, var(--purple-base) 45%);
  --purple-7:  color-mix(in srgb, #ffffff 43%, var(--purple-base) 57%);
  --purple-8:  color-mix(in srgb, #ffffff 30%, var(--purple-base) 70%);
  --purple-9:  var(--purple-base);
  --purple-10: color-mix(in srgb, #000000 10%, var(--purple-base) 90%);
  --purple-11: color-mix(in srgb, #000000 20%, var(--purple-base) 80%);
  --purple-12: color-mix(in srgb, #000000 50%, var(--purple-base) 50%);

  /* Violet scale */
  --violet-1:  color-mix(in srgb, #ffffff 95%, var(--violet-base) 5%);
  --violet-2:  color-mix(in srgb, #ffffff 90%, var(--violet-base) 10%);
  --violet-3:  color-mix(in srgb, #ffffff 82%, var(--violet-base) 18%);
  --violet-4:  color-mix(in srgb, #ffffff 74%, var(--violet-base) 26%);
  --violet-5:  color-mix(in srgb, #ffffff 65%, var(--violet-base) 35%);
  --violet-6:  color-mix(in srgb, #ffffff 55%, var(--violet-base) 45%);
  --violet-7:  color-mix(in srgb, #ffffff 43%, var(--violet-base) 57%);
  --violet-8:  color-mix(in srgb, #ffffff 30%, var(--violet-base) 70%);
  --violet-9:  var(--violet-base);
  --violet-10: color-mix(in srgb, #000000 10%, var(--violet-base) 90%);
  --violet-11: color-mix(in srgb, #000000 20%, var(--violet-base) 80%);
  --violet-12: color-mix(in srgb, #000000 50%, var(--violet-base) 50%);

  /* Iris scale */
  --iris-1:  color-mix(in srgb, #ffffff 95%, var(--iris-base) 5%);
  --iris-2:  color-mix(in srgb, #ffffff 90%, var(--iris-base) 10%);
  --iris-3:  color-mix(in srgb, #ffffff 82%, var(--iris-base) 18%);
  --iris-4:  color-mix(in srgb, #ffffff 74%, var(--iris-base) 26%);
  --iris-5:  color-mix(in srgb, #ffffff 65%, var(--iris-base) 35%);
  --iris-6:  color-mix(in srgb, #ffffff 55%, var(--iris-base) 45%);
  --iris-7:  color-mix(in srgb, #ffffff 43%, var(--iris-base) 57%);
  --iris-8:  color-mix(in srgb, #ffffff 30%, var(--iris-base) 70%);
  --iris-9:  var(--iris-base);
  --iris-10: color-mix(in srgb, #000000 10%, var(--iris-base) 90%);
  --iris-11: color-mix(in srgb, #000000 20%, var(--iris-base) 80%);
  --iris-12: color-mix(in srgb, #000000 50%, var(--iris-base) 50%);

  /* Indigo scale */
  --indigo-1:  color-mix(in srgb, #ffffff 95%, var(--indigo-base) 5%);
  --indigo-2:  color-mix(in srgb, #ffffff 90%, var(--indigo-base) 10%);
  --indigo-3:  color-mix(in srgb, #ffffff 82%, var(--indigo-base) 18%);
  --indigo-4:  color-mix(in srgb, #ffffff 74%, var(--indigo-base) 26%);
  --indigo-5:  color-mix(in srgb, #ffffff 65%, var(--indigo-base) 35%);
  --indigo-6:  color-mix(in srgb, #ffffff 55%, var(--indigo-base) 45%);
  --indigo-7:  color-mix(in srgb, #ffffff 43%, var(--indigo-base) 57%);
  --indigo-8:  color-mix(in srgb, #ffffff 30%, var(--indigo-base) 70%);
  --indigo-9:  var(--indigo-base);
  --indigo-10: color-mix(in srgb, #000000 10%, var(--indigo-base) 90%);
  --indigo-11: color-mix(in srgb, #000000 20%, var(--indigo-base) 80%);
  --indigo-12: color-mix(in srgb, #000000 50%, var(--indigo-base) 50%);

  /* Blue scale */
  --blue-1:  color-mix(in srgb, #ffffff 95%, var(--blue-base) 5%);
  --blue-2:  color-mix(in srgb, #ffffff 90%, var(--blue-base) 10%);
  --blue-3:  color-mix(in srgb, #ffffff 82%, var(--blue-base) 18%);
  --blue-4:  color-mix(in srgb, #ffffff 74%, var(--blue-base) 26%);
  --blue-5:  color-mix(in srgb, #ffffff 65%, var(--blue-base) 35%);
  --blue-6:  color-mix(in srgb, #ffffff 55%, var(--blue-base) 45%);
  --blue-7:  color-mix(in srgb, #ffffff 43%, var(--blue-base) 57%);
  --blue-8:  color-mix(in srgb, #ffffff 30%, var(--blue-base) 70%);
  --blue-9:  var(--blue-base);
  --blue-10: color-mix(in srgb, #000000 10%, var(--blue-base) 90%);
  --blue-11: color-mix(in srgb, #000000 20%, var(--blue-base) 80%);
  --blue-12: color-mix(in srgb, #000000 50%, var(--blue-base) 50%);

  /* Cyan scale */
  --cyan-1:  color-mix(in srgb, #ffffff 95%, var(--cyan-base) 5%);
  --cyan-2:  color-mix(in srgb, #ffffff 90%, var(--cyan-base) 10%);
  --cyan-3:  color-mix(in srgb, #ffffff 82%, var(--cyan-base) 18%);
  --cyan-4:  color-mix(in srgb, #ffffff 74%, var(--cyan-base) 26%);
  --cyan-5:  color-mix(in srgb, #ffffff 65%, var(--cyan-base) 35%);
  --cyan-6:  color-mix(in srgb, #ffffff 55%, var(--cyan-base) 45%);
  --cyan-7:  color-mix(in srgb, #ffffff 43%, var(--cyan-base) 57%);
  --cyan-8:  color-mix(in srgb, #ffffff 30%, var(--cyan-base) 70%);
  --cyan-9:  var(--cyan-base);
  --cyan-10: color-mix(in srgb, #000000 10%, var(--cyan-base) 90%);
  --cyan-11: color-mix(in srgb, #000000 20%, var(--cyan-base) 80%);
  --cyan-12: color-mix(in srgb, #000000 50%, var(--cyan-base) 50%);

  /* Teal scale */
  --teal-1:  color-mix(in srgb, #ffffff 95%, var(--teal-base) 5%);
  --teal-2:  color-mix(in srgb, #ffffff 90%, var(--teal-base) 10%);
  --teal-3:  color-mix(in srgb, #ffffff 82%, var(--teal-base) 18%);
  --teal-4:  color-mix(in srgb, #ffffff 74%, var(--teal-base) 26%);
  --teal-5:  color-mix(in srgb, #ffffff 65%, var(--teal-base) 35%);
  --teal-6:  color-mix(in srgb, #ffffff 55%, var(--teal-base) 45%);
  --teal-7:  color-mix(in srgb, #ffffff 43%, var(--teal-base) 57%);
  --teal-8:  color-mix(in srgb, #ffffff 30%, var(--teal-base) 70%);
  --teal-9:  var(--teal-base);
  --teal-10: color-mix(in srgb, #000000 10%, var(--teal-base) 90%);
  --teal-11: color-mix(in srgb, #000000 20%, var(--teal-base) 80%);
  --teal-12: color-mix(in srgb, #000000 50%, var(--teal-base) 50%);

  /* Jade scale */
  --jade-1:  color-mix(in srgb, #ffffff 95%, var(--jade-base) 5%);
  --jade-2:  color-mix(in srgb, #ffffff 90%, var(--jade-base) 10%);
  --jade-3:  color-mix(in srgb, #ffffff 82%, var(--jade-base) 18%);
  --jade-4:  color-mix(in srgb, #ffffff 74%, var(--jade-base) 26%);
  --jade-5:  color-mix(in srgb, #ffffff 65%, var(--jade-base) 35%);
  --jade-6:  color-mix(in srgb, #ffffff 55%, var(--jade-base) 45%);
  --jade-7:  color-mix(in srgb, #ffffff 43%, var(--jade-base) 57%);
  --jade-8:  color-mix(in srgb, #ffffff 30%, var(--jade-base) 70%);
  --jade-9:  var(--jade-base);
  --jade-10: color-mix(in srgb, #000000 10%, var(--jade-base) 90%);
  --jade-11: color-mix(in srgb, #000000 20%, var(--jade-base) 80%);
  --jade-12: color-mix(in srgb, #000000 50%, var(--jade-base) 50%);

  /* Grass scale */
  --grass-1:  color-mix(in srgb, #ffffff 95%, var(--grass-base) 5%);
  --grass-2:  color-mix(in srgb, #ffffff 90%, var(--grass-base) 10%);
  --grass-3:  color-mix(in srgb, #ffffff 82%, var(--grass-base) 18%);
  --grass-4:  color-mix(in srgb, #ffffff 74%, var(--grass-base) 26%);
  --grass-5:  color-mix(in srgb, #ffffff 65%, var(--grass-base) 35%);
  --grass-6:  color-mix(in srgb, #ffffff 55%, var(--grass-base) 45%);
  --grass-7:  color-mix(in srgb, #ffffff 43%, var(--grass-base) 57%);
  --grass-8:  color-mix(in srgb, #ffffff 30%, var(--grass-base) 70%);
  --grass-9:  var(--grass-base);
  --grass-10: color-mix(in srgb, #000000 10%, var(--grass-base) 90%);
  --grass-11: color-mix(in srgb, #000000 20%, var(--grass-base) 80%);
  --grass-12: color-mix(in srgb, #000000 50%, var(--grass-base) 50%);

  /* Lime scale */
  --lime-1:  color-mix(in srgb, #ffffff 95%, var(--lime-base) 5%);
  --lime-2:  color-mix(in srgb, #ffffff 90%, var(--lime-base) 10%);
  --lime-3:  color-mix(in srgb, #ffffff 82%, var(--lime-base) 18%);
  --lime-4:  color-mix(in srgb, #ffffff 74%, var(--lime-base) 26%);
  --lime-5:  color-mix(in srgb, #ffffff 65%, var(--lime-base) 35%);
  --lime-6:  color-mix(in srgb, #ffffff 55%, var(--lime-base) 45%);
  --lime-7:  color-mix(in srgb, #ffffff 43%, var(--lime-base) 57%);
  --lime-8:  color-mix(in srgb, #ffffff 30%, var(--lime-base) 70%);
  --lime-9:  var(--lime-base);
  --lime-10: color-mix(in srgb, #000000 10%, var(--lime-base) 90%);
  --lime-11: color-mix(in srgb, #000000 20%, var(--lime-base) 80%);
  --lime-12: color-mix(in srgb, #000000 50%, var(--lime-base) 50%);

  /* Mint scale */
  --mint-1:  color-mix(in srgb, #ffffff 95%, var(--mint-base) 5%);
  --mint-2:  color-mix(in srgb, #ffffff 90%, var(--mint-base) 10%);
  --mint-3:  color-mix(in srgb, #ffffff 82%, var(--mint-base) 18%);
  --mint-4:  color-mix(in srgb, #ffffff 74%, var(--mint-base) 26%);
  --mint-5:  color-mix(in srgb, #ffffff 65%, var(--mint-base) 35%);
  --mint-6:  color-mix(in srgb, #ffffff 55%, var(--mint-base) 45%);
  --mint-7:  color-mix(in srgb, #ffffff 43%, var(--mint-base) 57%);
  --mint-8:  color-mix(in srgb, #ffffff 30%, var(--mint-base) 70%);
  --mint-9:  var(--mint-base);
  --mint-10: color-mix(in srgb, #000000 10%, var(--mint-base) 90%);
  --mint-11: color-mix(in srgb, #000000 20%, var(--mint-base) 80%);
  --mint-12: color-mix(in srgb, #000000 50%, var(--mint-base) 50%);

  /* Sky scale */
  --sky-1:  color-mix(in srgb, #ffffff 95%, var(--sky-base) 5%);
  --sky-2:  color-mix(in srgb, #ffffff 90%, var(--sky-base) 10%);
  --sky-3:  color-mix(in srgb, #ffffff 82%, var(--sky-base) 18%);
  --sky-4:  color-mix(in srgb, #ffffff 74%, var(--sky-base) 26%);
  --sky-5:  color-mix(in srgb, #ffffff 65%, var(--sky-base) 35%);
  --sky-6:  color-mix(in srgb, #ffffff 55%, var(--sky-base) 45%);
  --sky-7:  color-mix(in srgb, #ffffff 43%, var(--sky-base) 57%);
  --sky-8:  color-mix(in srgb, #ffffff 30%, var(--sky-base) 70%);
  --sky-9:  var(--sky-base);
  --sky-10: color-mix(in srgb, #000000 10%, var(--sky-base) 90%);
  --sky-11: color-mix(in srgb, #000000 20%, var(--sky-base) 80%);
  --sky-12: color-mix(in srgb, #000000 50%, var(--sky-base) 50%);
}

/* Dark mode overrides using Bootstrap’s data attribute【219644060375250†L302-L339】 */
[data-bs-theme="dark"] {
  /* Green scale (dark) */
  --green-1:  #0e1512;
  --green-2:  #121b17;
  --green-3:  #132d21;
  --green-4:  #113b29;
  --green-5:  #174933;
  --green-6:  #20573e;
  --green-7:  #28684a;
  --green-8:  #2f7c57;
  --green-9:  #30a46c;
  --green-10: #33b074;
  --green-11: #3dd68c;
  --green-12: #b1f1cb;

  /* Gray scale (dark) */
  --gray-1:  #111111;
  --gray-2:  #191919;
  --gray-3:  #222222;
  --gray-4:  #2a2a2a;
  --gray-5:  #313131;
  --gray-6:  #3a3a3a;
  --gray-7:  #484848;
  --gray-8:  #606060;
  --gray-9:  #6e6e6e;
  --gray-10: #7b7b7b;
  --gray-11: #b4b4b4;
  --gray-12: #eeeeee;

  /* Surface and overlay colours for dark mode */
  --color-background: var(--gray-2);
  --color-panel-solid: var(--gray-3);
  --color-panel-translucent: rgba(0, 0, 0, 0.5);
  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-surface: rgba(0, 0, 0, 0.75);

  /* Shadows (dark) – lighter to stand out on dark surfaces */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.65);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-5: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Additional colour scales inherit from the light mode definitions above.
   * No overrides are necessary here; variables like --purple-1 or --teal-9
   * automatically fall back to their definitions in :root. */
}

/* -------------------------------------------------------------------------
 * 2. Bootstrap variable bindings
 *
 * Map Bootstrap’s CSS variables to the Radix palette so that the core
 * Bootstrap components automatically adopt our green accent and
 * surfaces.  These variables are defined twice: once for the
 * default light mode and again for dark mode inside the
 * `[data-bs-theme="dark"]` scope.  This approach aligns with the
 * recommended way to customise colour modes in Bootstrap 5.3【219644060375250†L302-L339】.
 */

:root {
  /* Primary colours */
  /*
  --bs-primary:        var(--green-9);
  --bs-primary-rgb:    48, 164, 108;
  */
  --bs-accent:        var(--green-9);
  --bs-accent-rgb:    48, 164, 108;
  /* Secondary and accent colours */
  /*
  --bs-secondary:      var(--gray-8);
  --bs-secondary-rgb:  187, 187, 187;
  --bs-success:        var(--green-9);
  --bs-success-rgb:    48, 164, 108;
  --bs-info:           var(--green-7);
  --bs-info-rgb:       91, 185, 139;
  --bs-warning:        #e1a406;
  --bs-warning-rgb:    225, 164, 6;
  --bs-danger:         #c43131;
  --bs-danger-rgb:     196, 49, 49;
  */
  --bs-gray:      var(--gray-8);
  --bs-gray-rgb:  187, 187, 187;
  --bs-green:        var(--green-9);
  --bs-green-rgb:    48, 164, 108;
  --bs-sky:           var(--green-7);
  --bs-sky-rgb:       91, 185, 139;
  --bs-orange:        #e1a406;
  --bs-orange-rgb:    225, 164, 6;
  --bs-red:         #c43131;
  --bs-red-rgb:     196, 49, 49;
  --bs-light:          var(--gray-2);
  --bs-light-rgb:      249, 249, 249;
  --bs-dark:           var(--gray-12);
  --bs-dark-rgb:       238, 238, 238;
  /* Body typography and backgrounds */
  --bs-body-bg:        var(--color-background);
  --bs-body-color:     var(--gray-12);
  --bs-body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-line-height: 1.5;
  --bs-body-font-size: 1rem;
  /* Borders and radii */
  --bs-border-color:   var(--gray-5);
  --bs-border-radius:   var(--radius-3);
  --bs-border-radius-sm: var(--radius-2);
  --bs-border-radius-lg: var(--radius-4);
  --bs-border-radius-pill: var(--radius-full);
  /* Links and emphasised text */
  --bs-link-color:      var(--green-9);
  --bs-link-hover-color: var(--green-10);
  --bs-code-color:      var(--green-10);
  --bs-emphasis-color:  var(--green-11);
  --bs-nav-link-hover-color: var(--green-10);
  --bs-btn-hover-bg: transparent;
}

[data-bs-theme="dark"] {
  /*
  --bs-primary:        var(--green-9);
  --bs-primary-rgb:    48, 164, 108;
  --bs-secondary:      var(--gray-7);
  --bs-secondary-rgb:  96, 96, 96;
  --bs-success:        var(--green-9);
  --bs-success-rgb:    48, 164, 108;
  --bs-info:           var(--green-7);
  --bs-info-rgb:       47, 124, 87;
  --bs-warning:        #e1a406;
  --bs-warning-rgb:    225, 164, 6;
  --bs-danger:         #c43131;
  --bs-danger-rgb:     196, 49, 49;
  */
  --bs-accent:        var(--green-9);
  --bs-accent-rgb:    48, 164, 108;
  --bs-gray:      var(--gray-7);
  --bs-gray-rgb:  96, 96, 96;
  --bs-green:        var(--green-9);
  --bs-green-rgb:    48, 164, 108;
  --bs-sky:           var(--green-7);
  --bs-sky-rgb:       47, 124, 87;
  --bs-orange:        #e1a406;
  --bs-orange-rgb:    225, 164, 6;
  --bs-red:         #c43131;
  --bs-red-rgb:     196, 49, 49;
  --bs-light:          var(--gray-2);
  --bs-light-rgb:      17, 17, 17;
  --bs-dark:           var(--gray-12);
  --bs-dark-rgb:       32, 32, 32;
  /* Body and borders in dark mode */
  --bs-body-bg:        var(--color-background);
  --bs-body-color:     var(--gray-12);
  --bs-border-color:   var(--gray-7);
  --bs-border-radius:   var(--radius-3);
  --bs-border-radius-sm: var(--radius-2);
  --bs-border-radius-lg: var(--radius-4);
  --bs-border-radius-pill: var(--radius-full);
  --bs-link-color:      var(--green-9);
  --bs-link-hover-color: var(--green-11);
  --bs-code-color:      var(--green-10);
  --bs-emphasis-color:  var(--green-11);
  --bs-nav-link-hover-color: var(--green-11);
  --bs-btn-hover-bg: transparent;
}

/* -------------------------------------------------------------------------
 * 3. Base resets
 *
 * Reset the box model and set the body to use the correct colours.  These
 * styles mirror the defaults from Bootstrap and Radix Themes.
 */

*, *::before, *::after {
  box-sizing: border-box;
}

:focus-visible {
  outline: var(--green-7) solid 1px;
}

body {
  margin: 0;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  line-height: var(--bs-body-line-height);
  font-size: var(--bs-body-font-size);
}

/* -------------------------------------------------------------------------
 * 4. Radix UI primitives
 *
 * The following classes implement the appearance of the Radix Themes
 * primitives.  Many elements adopt a fully rounded shape by using
 * `var(--radius-full)` to honour the `radius="full"` option.  Where
 * appropriate, interactive elements transition colours to provide
 * feedback.  A handful of components (slider, switch, radio) have
 * been rebuilt to more closely align with Radix’s look and to fix
 * alignment issues reported by the user.
 */

/* 4.1 Alert Dialog */
.rt-alert-dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  backdrop-filter: blur(4px);
  z-index: 1050;
}

/* 4.2 Aspect Ratio */
.rt-aspect-ratio {
  position: relative;
  width: 100%;
}
.rt-aspect-ratio::before {
  content: "";
  display: block;
  padding-top: var(--rt-aspect-ratio, 56.25%);
}
.rt-aspect-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4.3 Avatar */
.rt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--green-5);
  color: var(--green-11);
  font-weight: 500;
  user-select: none;
}
.rt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4.4 Badge */
.rt-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background-color: var(--green-4);
  color: var(--green-11);
}

/* 4.5 Blockquote */
.rt-blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--green-8);
  color: var(--bs-body-color);
  font-style: italic;
}
.rt-blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-9);
}

/* 4.6 Button */
/*
 * Buttons
 *
 * The base .rt-button class corresponds to the “solid” variant with a full green fill and white text.  Additional
 * modifier classes implement the other Radix variants (classic, solid, soft, surface, outline, ghost) and sizes.
 */
.rt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--green-1);
  background-color: var(--green-9);
}
.rt-button:hover {
  background-color: var(--green-10);
}
.rt-button:active {
  background-color: var(--green-11);
}
.rt-button:disabled {
  background-color: var(--gray-4);
  color: var(--gray-9);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Variant modifiers */
.rt-button-classic {
  /* Classic: subtle fill and border similar to Radix classic variant. */
  color: var(--green-11);
  background-color: var(--green-3);
  border: 1px solid var(--green-6);
  padding: 0.5rem 1rem;
}
.rt-button-classic:hover {
  background-color: var(--green-4);
}
.rt-button-classic:active {
  background-color: var(--green-5);
}
.rt-button-solid {
  /* identical to base .rt-button */
}
.rt-button-soft {
  color: var(--green-11);
  background-color: var(--green-3);
}
.rt-button-soft:hover {
  background-color: var(--green-4);
}
.rt-button-surface {
  color: var(--bs-body-color);
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-5);
}
.rt-button-surface:hover {
  background-color: var(--gray-2);
}
.rt-button-outline {
  color: var(--green-9);
  background-color: transparent;
  border: 1px solid var(--green-9);
}
.rt-button-outline:hover {
  background-color: var(--green-1);
}
.rt-button-ghost {
  color: var(--green-9);
  background-color: transparent;
  border: none;
}
.rt-button-ghost:hover {
  background-color: var(--green-2);
}

/* Size modifiers */
.rt-button-xs {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}
.rt-button-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}
.rt-button-md {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
.rt-button-lg {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
}

/* 4.7 Callout */
.rt-callout {
  padding: 1rem;
  border-left: 4px solid var(--green-8);
  background-color: var(--green-1);
  color: var(--green-11);
  border-radius: var(--radius-4);
  margin-bottom: 1rem;
}

/* 4.8 Card */
.rt-card {
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  padding: 1rem;
  color: var(--bs-body-color);
}
.rt-card-header {
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.25rem;
}
.rt-card-footer {
  margin-top: 1rem;
}

/* 4.9 Checkbox */
.rt-checkbox {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--gray-7);
  border-radius: var(--radius-2);
  background-color: var(--color-background);
  cursor: pointer;
  appearance: none;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.rt-checkbox:checked {
  background-color: var(--green-9);
  border-color: var(--green-9);
}
.rt-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.05rem;
  width: 0.25rem;
  height: 0.55rem;
  border: solid var(--green-1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 4.10 Checkbox Group */
.rt-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 4.11 Checkbox Cards */
/* Checkbox cards behave like selectable list items.  The input is hidden and its checked state is reflected in the card’s appearance. */
.rt-checkbox-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  background-color: var(--color-panel-solid);
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.rt-checkbox-card:hover {
  background-color: var(--gray-2);
}
.rt-checkbox-card input[type='checkbox'] {
  margin: 0;
}
.rt-checkbox-card span {
  flex: 1;
}
.rt-checkbox-card input[type='checkbox']:checked + span {
  color: var(--green-11);
}

/* 4.12 Code */
.rt-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-2);
  background-color: var(--gray-3);
  color: var(--green-11);
}

/* 4.13 Context Menu / Dropdown */
.rt-context-menu,
.rt-dropdown-menu {
  display: none;
  position: absolute;
  min-width: 10rem;
  padding: 0.5rem 0;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-3);
  z-index: 1000;
  list-style: none;
  margin: 0;
}
.rt-context-menu li,
.rt-dropdown-menu li {
  padding: 0.25rem 1rem;
  cursor: pointer;
  white-space: nowrap;
}
.rt-context-menu li:hover,
.rt-dropdown-menu li:hover {
  background-color: var(--green-4);
  color: var(--green-12);
}
.rt-context-menu.show,
.rt-dropdown-menu.show {
  display: block;
}

/* Submenus for context and dropdown menus
 * Radix menus support nested submenus.  The `.rt-submenu` class should
 * be placed on a nested <ul> inside an <li> of a context or dropdown menu.
 * The submenu is hidden by default and shown when its parent <li> is
 * hovered.  Positioning defaults to the right of the parent menu but can
 * be modified by adding orientation classes (`.rt-submenu-left`,
 * `.rt-submenu-top`, `.rt-submenu-bottom`) to the submenu. */
.rt-context-menu li > .rt-submenu,
  .rt-dropdown-menu li > .rt-submenu {
  display: none;
  position: absolute;
  /* Position the submenu so its middle aligns with the middle of the parent
   * item.  The subtraction of 0.5rem compensates for padding. */
  top: calc(50% - 0.5rem);
  left: 100%;
  min-width: 10rem;
  padding: 0.5rem 0;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-3);
  list-style: none;
  margin: 0;
  z-index: 1001;
}
.rt-context-menu li:hover > .rt-submenu,
.rt-dropdown-menu li:hover > .rt-submenu {
  display: block;
}

/* Style submenu list items.  Without this, only the hover style of the
 * parent menu applies, resulting in poor contrast.  We reset the text
 * colour and apply the same padding and hover effects used for the top
 * level items. */
.rt-context-menu .rt-submenu li,
.rt-dropdown-menu .rt-submenu li {
  padding: 0.25rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--bs-body-color);
}
.rt-context-menu .rt-submenu li:hover,
.rt-dropdown-menu .rt-submenu li:hover {
  background-color: var(--green-4);
  color: var(--green-12);
}
.rt-context-menu li > .rt-submenu,
.rt-dropdown-menu li > .rt-submenu {
  background-color: var(--color-panel-solid);
  color: var(--bs-body-color);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--green-11);
  background-color: var(--green-5);
}
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  color: var(--green-12);
  background-color: var(--green-4);
}

/* Orientation modifiers for submenus
 * Add one of these classes to a `.rt-submenu` element to change the
 * direction it opens relative to its parent.  Without a modifier it
 * opens to the right. */
.rt-submenu-left {
  left: auto !important;
  right: 100% !important;
}
.rt-submenu-top {
  top: auto !important;
  bottom: 0 !important;
  left: 0;
}
.rt-submenu-bottom {
  top: 100% !important;
  left: 0;
}

/* 4.14 Data List */
/* Data list
 *
 * Display dt/dd pairs in two columns.  Apply an active style by adding
 * the .active class to the dt and dd elements individually (not on a
 * wrapper).  This avoids layout disruption when using a wrapper.
 */
.rt-data-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}
.rt-data-list dt {
  /* By default, dt elements use the surrounding text colour and weight. */
  font-weight: inherit;
  color: inherit;
}
.rt-data-list dd {
  margin: 0;
  color: var(--bs-body-color);
}
/* Active state for dt/dd elements */
.rt-data-list dt.active,
.rt-data-list dd.active {
  /* Active rows do not alter weight or colour now; the state is purely semantic. */
  color: inherit;
  font-weight: inherit;
}

/* 4.15 Dialog */
.rt-dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  backdrop-filter: blur(4px);
  z-index: 1040;
}
.rt-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-panel-solid);
  border-radius: var(--radius-4);
  padding: 1.5rem;
  box-shadow: var(--shadow-4);
  z-index: 1041;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  color: var(--bs-body-color);
}

/* 4.16 Em */
.rt-em {
  font-style: italic;
  color: var(--green-10);
}

/* 4.17 Heading */
.rt-heading-1 { font-size: 2rem;   font-weight: 700; margin: 0 0 0.5rem; }
.rt-heading-2 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
.rt-heading-3 { font-size: 1.5rem;  font-weight: 700; margin: 0 0 0.5rem; }
.rt-heading-4 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.rt-heading-5 { font-size: 1rem;    font-weight: 700; margin: 0 0 0.5rem; }
.rt-heading-6 { font-size: 0.875rem;font-weight: 700; margin: 0 0 0.5rem; }

/* 4.18 Hover Card */
.rt-hover-card {
  display: block;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  padding: 1rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rt-hover-card:hover {
  box-shadow: var(--shadow-4);
  transform: translateY(-2px);
}

/* 4.19 Icon Button */
/* Icon buttons adopt the accent colour scheme and are fully round.  Size modifier classes may be applied. */
.rt-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--green-4);
  color: var(--green-11);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.rt-icon-button:hover {
  background-color: var(--green-5);
}
.rt-icon-button-sm {
  width: 1.5rem;
  height: 1.5rem;
}
.rt-icon-button-lg {
  width: 2.5rem;
  height: 2.5rem;
}

/* 4.21 Kbd */
.rt-kbd {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--green-11);
  background-color: var(--gray-3);
  border-radius: var(--radius-2);
  border: 1px solid var(--gray-5);
}

/* 4.22 Link */
.rt-link {
  color: var(--green-9);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.1s ease;
}
.rt-link:hover {
  color: var(--green-10);
}

/* 4.23 Popover */
.rt-popover {
  position: absolute;
  z-index: 1080;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-4);
  padding: 0.75rem;
  min-width: 10rem;
  color: var(--bs-body-color);
}

/* 4.24 Progress */
/* Progress bar
 *
 * A simple progress bar with a rounded track and bar.  The bar width is
 * controlled via the --rt-progress-value custom property set on the
 * .rt-progress-bar element (e.g. "60%" for 60% progress).
 */
.rt-progress {
  width: 100%;
  height: 0.75rem;
  background-color: var(--gray-4);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rt-progress > .rt-progress-bar {
  height: 100%;
  background-color: var(--green-9);
  width: var(--rt-progress-value, 0%);
  border-radius: var(--radius-full);
  transition: width 0.2s ease;
}

/* 4.25 Quote */
.rt-quote {
  display: block;
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--green-8);
  color: var(--bs-body-color);
  font-style: italic;
  position: relative;
}
.rt-quote::before {
  content: open-quote;
}
.rt-quote::after {
  content: close-quote;
}

/* 4.26 Radio */
.rt-radio {
  appearance: none;
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--gray-7);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: border-color 0.1s ease, background-color 0.1s ease;
}
.rt-radio:checked {
  border-color: var(--green-9);
  background-color: var(--green-9);
}
.rt-radio:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--green-1);
}

/* 4.27 Radio Group */
.rt-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 4.28 Radio Cards */
.rt-radio-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  background-color: var(--color-panel-solid);
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.rt-radio-card:hover {
  background-color: var(--green-2);
}
.rt-radio-card input[type='radio'] {
  margin: 0;
}

/* 4.29 Scroll Area */
.rt-scroll-area {
  overflow: auto;
  max-height: 100%;
  padding-right: 0.5rem;
}

/* 4.30 Select */
/* Select
 *
 * Matches the Radix select style with a taller control, rounded corners and a custom arrow.  The arrow colour
 * adjusts automatically via CSS variables.  This control does not rely on additional JavaScript.
 */
.rt-select {
  display: inline-block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-full);
  background-color: var(--color-panel-solid);
  color: var(--bs-body-color);
  appearance: none;
  /* embed a down arrow icon; the fill colour is a neutral grey to work across modes */
  /* Custom arrow icon: use a slightly darker neutral so it contrasts in both themes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23646464' d='M4.146 5.146a.5.5 0 0 1 .708 0L8 8.293l3.146-3.147a.5.5 0 0 1 .708.708L8.707 9.707a1 1 0 0 1-1.414 0L4.146 5.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.rt-select:hover {
  background-color: var(--gray-2);
}
.rt-select:focus {
  border-color: var(--green-7);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(48, 164, 108, 0.25);
}

/* Custom Select (Radix-like)
 *
 * The Radix Select is composed of a trigger button and a popup menu.  These
 * styles allow you to build a select using a wrapper (.rt-select-wrapper)
 * containing a trigger (.rt-select-trigger) and an unordered list menu
 * (.rt-select-menu).  Use JavaScript to show/hide the menu and update the
 * selected value.  This component better mimics the Radix select than a
 * native <select> element, which cannot be styled consistently across
 * browsers.
 */
.rt-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.rt-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-full);
  background-color: var(--color-panel-solid);
  color: var(--bs-body-color);
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease;
  font-size: 1rem;
}
.rt-select-trigger::after {
  content: '';
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23646464' d='M4.146 5.146a.5.5 0 0 1 .708 0L8 8.293l3.146-3.147a.5.5 0 0 1 .708.708L8.707 9.707a1 1 0 0 1-1.414 0L4.146 5.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  margin-left: 0.5rem;
}
.rt-select-trigger:hover {
  background-color: var(--gray-2);
}
.rt-select-trigger:focus {
  border-color: var(--green-7);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(48, 164, 108, 0.25);
}
.rt-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-3);
  z-index: 1000;
  list-style: none;
  padding: 0.25rem 0;
  /* Expand the dropdown menu height to show more options before scrolling.
   * The width grows to fit the widest option using max-content values. */
  max-height: 20rem;
  width: max-content;
  width: -moz-max-content;
  width: -webkit-max-content;
  overflow-y: auto;
  display: none;
}
.rt-select-menu li {
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: var(--bs-body-color);
  white-space: nowrap;
  border-radius: var(--radius-4);
  margin: 0 0.5rem;
}
.rt-select-menu li:hover {
  background-color: var(--green-4);
  color: var(--green-12);
}
.rt-select-menu li[aria-selected='true'] {
  background-color: var(--green-5);
  color: var(--green-12);
  font-weight: 600;
}

/* Search input container inside a select menu.  When `.rt-select-searchable` is
 * applied to the wrapper, a list item with this class is inserted at the top
 * of the menu containing an input field. */
.rt-select-menu .rt-select-search {
  padding: 0.25rem 0.5rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--gray-4);
  border-radius: 0;
  margin: 0 0 0.5rem 0;
}
.rt-select-menu .rt-select-search input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  background-color: var(--color-panel-solid);
  color: var(--bs-body-color);
}

/* Disabled select items: greyed out and non‑interactive */
.rt-select-menu li[aria-disabled='true'],
.rt-select-menu li.rt-select-disabled {
  color: var(--gray-7);
  cursor: not-allowed;
}
.rt-select-menu li[aria-disabled='true']:hover,
.rt-select-menu li.rt-select-disabled:hover {
  background-color: inherit;
  color: var(--gray-7);
}

/* Separator inside a select menu.  Use an empty <li class="rt-separator"> to
 * visually separate groups of options. */
.rt-select-menu .rt-separator {
  height: 1px;
  margin: 0.5rem;
  background-color: var(--gray-4);
  pointer-events: none;
  padding: 0;
}

/* 4.31 Separator */
.rt-separator {
  border: none;
  border-top: 1px solid var(--gray-4);
  margin: 1rem 0;
}

/* 4.32 Segmented Control */
.rt-segmented-control {
  display: inline-flex;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--gray-4);
}
.rt-segmented-control button {
  flex: 1 1 auto;
  padding: 0.5rem 1rem;
  background-color: var(--color-background);
  border: none;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.rt-segmented-control button:hover {
  background-color: var(--gray-3);
}
.rt-segmented-control button[aria-pressed='true'] {
  background-color: var(--green-9);
  color: var(--green-1);
}

/* 4.33 Skeleton */
.rt-skeleton {
  display: inline-block;
  width: 100%;
  height: 1rem;
  border-radius: var(--radius-4);
  background: linear-gradient(90deg, var(--gray-4) 25%, var(--gray-5) 37%, var(--gray-4) 63%);
  background-size: 400% 100%;
  animation: rt-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes rt-skeleton-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 4.34 Slider – reworked to fill up to the current value */
/* Slider
 *
 * Mimics the Radix slider with a slim track and a distinct thumb.  The
 * container (.rt-slider) provides vertical centring of the input so the
 * thumb sits perfectly in the middle.  Use the CSS custom property
 * --slider-value (0–100) on the .rt-slider container to control the
 * filled portion of the track.
 */
.rt-slider {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
}
.rt-slider input[type='range'] {
  flex: 1 1 auto;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: linear-gradient(to right,
    var(--green-9) 0%,
    var(--green-9) calc(var(--slider-value, 0) * 1%),
    var(--gray-4) calc(var(--slider-value, 0) * 1%),
    var(--gray-4) 100%
  );
  outline: none;
  cursor: pointer;
}
.rt-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-panel-solid);
  border: 2px solid var(--green-9);
  cursor: pointer;
  /* Adjust vertical alignment of the thumb relative to the track */
  margin-top: -0.0563rem;
}
.rt-slider input[type='range']::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-panel-solid);
  border: 2px solid var(--green-9);
  cursor: pointer;
}
.rt-slider input[type='range']:focus {
  box-shadow: 0 0 0 0.2rem rgba(48, 164, 108, 0.25);
}

/* 4.35 Spinner */
.rt-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid var(--gray-4);
  border-top-color: var(--green-9);
  border-radius: var(--radius-full);
  animation: rt-spinner-spin 0.75s linear infinite;
}
@keyframes rt-spinner-spin {
  to { transform: rotate(360deg); }
}

/* 4.36 Strong */
.rt-strong {
  font-weight: 700;
  color: var(--green-11);
}

/* 4.37 Switch – reworked to centre the knob vertically */
/* Switch
 *
 * Restore the switch knob alignment that may be affected by the generic
 * .rt-slider styles.  The switch uses its own slider track and knob.
 */
.rt-switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  vertical-align: middle;
}
.rt-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* Switch track */
.rt-switch .rt-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: block;
  background-color: var(--gray-5);
  border-radius: var(--radius-full);
  transition: background-color 0.3s ease;
}
/* Switch knob */
.rt-switch .rt-slider::before {
  position: absolute;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0.125rem;
  top: 0.125rem;
  background-color: var(--color-panel-solid);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-1);
  transition: transform 0.3s ease;
}
.rt-switch input:checked + .rt-slider {
  background-color: var(--green-9);
}
.rt-switch input:checked + .rt-slider::before {
  transform: translateX(1.25rem);
}

/* 4.38 Table */
.rt-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-4);
  overflow: hidden;
}
.rt-table th,
.rt-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--gray-4);
}
.rt-table thead th {
  background-color: var(--green-4);
  color: var(--green-12);
  text-align: left;
  font-weight: 600;
}
.rt-table tbody tr:nth-child(even) {
  background-color: var(--gray-2);
}
.rt-table tbody tr:hover {
  background-color: var(--green-2);
}

/* 4.39 Tabs */
.rt-tabs {
  border-bottom: 1px solid var(--gray-4);
  display: flex;
  gap: 1rem;
}
.rt-tabs button {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--bs-body-color);
  transition: color 0.1s ease, border-bottom 0.1s ease;
  border-bottom: 2px solid transparent;
}
.rt-tabs button:hover {
  color: var(--green-9);
}
.rt-tabs button[aria-selected='true'] {
  color: var(--green-9);
  border-color: var(--green-9);
}

/* 4.40 Tab Nav */
/* Tab Nav
 *
 * Use an underline indicator on the active link rather than a pill background.
 * This more closely resembles the Radix TabNav component.  Links are laid
 * out horizontally with a configurable gap.
 */
.rt-tab-nav {
  display: flex;
  gap: 1rem;
}
.rt-tab-nav a {
  position: relative;
  padding: 0.25rem 0;
  color: var(--bs-body-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.1s ease;
}
.rt-tab-nav a:hover {
  color: var(--green-9);
}
.rt-tab-nav a[aria-current='page'] {
  color: var(--green-9);
  font-weight: 600;
}
.rt-tab-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--green-9);
}

/* 4.41 Text */
.rt-text {
  margin: 0 0 1rem;
  color: var(--bs-body-color);
  font-size: 1rem;
  line-height: 1.5;
}

/* 4.42 Text Area */
.rt-textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-5);
  border-radius: var(--radius-4);
  background-color: var(--color-background);
  color: var(--bs-body-color);
  resize: vertical;
  transition: border-color 0.1s ease;
}
.rt-textarea:focus {
  border-color: var(--green-7);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(48, 164, 108, 0.25);
}

/* 4.43 Text Field */
.rt-text-field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-5);
  border-radius: var(--radius-4);
  background-color: var(--color-background);
  color: var(--bs-body-color);
  transition: border-color 0.1s ease;
}
.rt-text-field:focus {
  border-color: var(--green-7);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(48, 164, 108, 0.25);
}

/* 4.44 Tooltip */
.rt-tooltip {
  position: absolute;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-panel-solid);
  color: var(--bs-body-color);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 2000;
}
.rt-tooltip[data-placement='top']    { transform: translate(-50%, -100%); }
.rt-tooltip[data-placement='bottom'] { transform: translate(-50%, 0); }
.rt-tooltip[data-placement='left']   { transform: translate(-100%, -50%); }
.rt-tooltip[data-placement='right']  { transform: translate(0, -50%); }

/* 4.45 Utility classes */
.rt-flex { display: flex; }
.rt-flex-column { flex-direction: column; }
.rt-flex-row { flex-direction: row; }
.rt-items-center { align-items: center; }
.rt-justify-center { justify-content: center; }
.rt-gap-1 { gap: 0.25rem; }
.rt-gap-2 { gap: 0.5rem; }
.rt-gap-3 { gap: 0.75rem; }
.rt-gap-4 { gap: 1rem; }
.rt-mb-1 { margin-bottom: 0.25rem; }
.rt-mb-2 { margin-bottom: 0.5rem; }
.rt-mb-3 { margin-bottom: 0.75rem; }
.rt-mb-4 { margin-bottom: 1rem; }
.rt-text-center { text-align: center; }

/* 4.20 Inset */
/* Inset container
 * Provides a translucent panel with blur.  Padding and margin are not set
 * here so that the component inherits spacing from its context. */
.rt-inset {
  background-color: var(--color-panel-translucent);
  border-radius: var(--radius-4);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------
 * 5. Generic variant utilities
 *
 * Many Radix components support variants such as classic, solid, soft,
 * surface, outline and ghost.  To allow these variants to be applied
 * consistently across multiple elements (badges, cards, callouts, etc.),
 * the following utility classes can be used.  They adjust background,
 * border and text colour in the same spirit as the button variants.
 */
.rt-variant-classic {
  color: var(--green-11);
  background-color: var(--green-3);
  border: 1px solid var(--green-6);
}
.rt-variant-classic:hover {
  background-color: var(--green-4);
}
.rt-variant-solid {
  color: var(--green-1);
  background-color: var(--green-9);
  border: 1px solid var(--green-9);
}
.rt-variant-solid:hover {
  background-color: var(--green-10);
}
.rt-variant-soft {
  color: var(--green-11);
  background-color: var(--green-3);
  border: 1px solid var(--green-5);
}
.rt-variant-soft:hover {
  background-color: var(--green-4);
}
.rt-variant-surface {
  color: var(--bs-body-color);
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-4);
}
.rt-variant-surface:hover {
  background-color: var(--gray-2);
}
.rt-variant-outline {
  color: var(--green-9);
  background-color: transparent;
  border: 1px solid var(--green-9);
}
.rt-variant-outline:hover {
  background-color: var(--green-1);
}
.rt-variant-ghost {
  color: var(--green-9);
  background-color: transparent;
  border: none;
}
.rt-variant-ghost:hover {
  background-color: var(--green-2);
}

/* End of Radix‑Bootstrap theme v2 */

/* ---------------------------------------------------------------------
 * 6. Bootstrap modal integration for Alert Dialog
 *
 * To integrate our Alert Dialog with Bootstrap’s modal markup, apply the
 * `rt-alert-dialog` class to the `.modal` element.  These rules style
 * the overlay, dialog and contents to match the Radix aesthetic while
 * leveraging Bootstrap’s modal behaviour.
 */
.rt-alert-dialog.modal {
  background-color: var(--color-overlay);
  backdrop-filter: blur(4px);
}
.rt-alert-dialog .modal-content {
  background-color: var(--color-panel-solid);
  color: var(--bs-body-color);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-4);
}
.rt-alert-dialog .modal-header,
.rt-alert-dialog .modal-footer {
  border: none;
}
/* Intentionally removed custom styling from the close button to allow default appearance */

/* ---------------------------------------------------------------------
 * 7. Elevation utility
 *
 * The `.rt-elevate` class can be applied to cards or panels to give them
 * a raised effect on hover.  It uses the Radix shadow scale and a small
 * translateY for a subtle lift.
 */
.rt-elevate {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rt-elevate:hover {
  box-shadow: var(--shadow-4);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
 * 8. Colour utility classes
 *
 * These utility classes allow users to easily set text and background colours
 * using the Radix colour scales defined above.  The pattern is
 * `.rt-{color}-{step}` for text colour and `.rt-bg-{color}-{step}` for background
 * colour, where {color} can be accent (green), gray, purple or teal and {step}
 * runs from 1 through 12.
 */
/* Accent (green) text colours */
.rt-accent-1  { color: var(--green-1); }
.rt-accent-2  { color: var(--green-2); }
.rt-accent-3  { color: var(--green-3); }
.rt-accent-4  { color: var(--green-4); }
.rt-accent-5  { color: var(--green-5); }
.rt-accent-6  { color: var(--green-6); }
.rt-accent-7  { color: var(--green-7); }
.rt-accent-8  { color: var(--green-8); }
.rt-accent-9  { color: var(--green-9); }
.rt-accent-10 { color: var(--green-10); }
.rt-accent-11 { color: var(--green-11); }
.rt-accent-12 { color: var(--green-12); }
/* Accent background colours */
.rt-bg-accent-1  { background-color: var(--green-1); }
.rt-bg-accent-2  { background-color: var(--green-2); }
.rt-bg-accent-3  { background-color: var(--green-3); }
.rt-bg-accent-4  { background-color: var(--green-4); }
.rt-bg-accent-5  { background-color: var(--green-5); }
.rt-bg-accent-6  { background-color: var(--green-6); }
.rt-bg-accent-7  { background-color: var(--green-7); }
.rt-bg-accent-8  { background-color: var(--green-8); }
.rt-bg-accent-9  { background-color: var(--green-9); }
.rt-bg-accent-10 { background-color: var(--green-10); }
.rt-bg-accent-11 { background-color: var(--green-11); }
.rt-bg-accent-12 { background-color: var(--green-12); }

/* Gray text colours */
.rt-gray-1  { color: var(--gray-1); }
.rt-gray-2  { color: var(--gray-2); }
.rt-gray-3  { color: var(--gray-3); }
.rt-gray-4  { color: var(--gray-4); }
.rt-gray-5  { color: var(--gray-5); }
.rt-gray-6  { color: var(--gray-6); }
.rt-gray-7  { color: var(--gray-7); }
.rt-gray-8  { color: var(--gray-8); }
.rt-gray-9  { color: var(--gray-9); }
.rt-gray-10 { color: var(--gray-10); }
.rt-gray-11 { color: var(--gray-11); }
.rt-gray-12 { color: var(--gray-12); }
/* Gray background colours */
.rt-bg-gray-1  { background-color: var(--gray-1); }
.rt-bg-gray-2  { background-color: var(--gray-2); }
.rt-bg-gray-3  { background-color: var(--gray-3); }
.rt-bg-gray-4  { background-color: var(--gray-4); }
.rt-bg-gray-5  { background-color: var(--gray-5); }
.rt-bg-gray-6  { background-color: var(--gray-6); }
.rt-bg-gray-7  { background-color: var(--gray-7); }
.rt-bg-gray-8  { background-color: var(--gray-8); }
.rt-bg-gray-9  { background-color: var(--gray-9); }
.rt-bg-gray-10 { background-color: var(--gray-10); }
.rt-bg-gray-11 { background-color: var(--gray-11); }
.rt-bg-gray-12 { background-color: var(--gray-12); }

/*
 * Additional colour utility classes generated from Radix scales.
 *
 * These classes allow you to apply any step of any Radix colour scale as either
 * a text colour (`.rt-<scale>-<step>`) or a background colour
 * (`.rt-bg-<scale>-<step>`).  The underlying variables are defined in the
 * `:root` scope using CSS colour mixing so that both light and dark modes
 * share the same palette definitions.  See the `:root` section for the base
 * values and derived shades.
 */

/* Mauve scale */
.rt-mauve-1  { color: var(--mauve-1); }
.rt-bg-mauve-1  { background-color: var(--mauve-1); }
.rt-mauve-2  { color: var(--mauve-2); }
.rt-bg-mauve-2  { background-color: var(--mauve-2); }
.rt-mauve-3  { color: var(--mauve-3); }
.rt-bg-mauve-3  { background-color: var(--mauve-3); }
.rt-mauve-4  { color: var(--mauve-4); }
.rt-bg-mauve-4  { background-color: var(--mauve-4); }
.rt-mauve-5  { color: var(--mauve-5); }
.rt-bg-mauve-5  { background-color: var(--mauve-5); }
.rt-mauve-6  { color: var(--mauve-6); }
.rt-bg-mauve-6  { background-color: var(--mauve-6); }
.rt-mauve-7  { color: var(--mauve-7); }
.rt-bg-mauve-7  { background-color: var(--mauve-7); }
.rt-mauve-8  { color: var(--mauve-8); }
.rt-bg-mauve-8  { background-color: var(--mauve-8); }
.rt-mauve-9  { color: var(--mauve-9); }
.rt-bg-mauve-9  { background-color: var(--mauve-9); }
.rt-mauve-10  { color: var(--mauve-10); }
.rt-bg-mauve-10  { background-color: var(--mauve-10); }
.rt-mauve-11  { color: var(--mauve-11); }
.rt-bg-mauve-11  { background-color: var(--mauve-11); }
.rt-mauve-12  { color: var(--mauve-12); }
.rt-bg-mauve-12  { background-color: var(--mauve-12); }

/* Slate scale */
.rt-slate-1  { color: var(--slate-1); }
.rt-bg-slate-1  { background-color: var(--slate-1); }
.rt-slate-2  { color: var(--slate-2); }
.rt-bg-slate-2  { background-color: var(--slate-2); }
.rt-slate-3  { color: var(--slate-3); }
.rt-bg-slate-3  { background-color: var(--slate-3); }
.rt-slate-4  { color: var(--slate-4); }
.rt-bg-slate-4  { background-color: var(--slate-4); }
.rt-slate-5  { color: var(--slate-5); }
.rt-bg-slate-5  { background-color: var(--slate-5); }
.rt-slate-6  { color: var(--slate-6); }
.rt-bg-slate-6  { background-color: var(--slate-6); }
.rt-slate-7  { color: var(--slate-7); }
.rt-bg-slate-7  { background-color: var(--slate-7); }
.rt-slate-8  { color: var(--slate-8); }
.rt-bg-slate-8  { background-color: var(--slate-8); }
.rt-slate-9  { color: var(--slate-9); }
.rt-bg-slate-9  { background-color: var(--slate-9); }
.rt-slate-10  { color: var(--slate-10); }
.rt-bg-slate-10  { background-color: var(--slate-10); }
.rt-slate-11  { color: var(--slate-11); }
.rt-bg-slate-11  { background-color: var(--slate-11); }
.rt-slate-12  { color: var(--slate-12); }
.rt-bg-slate-12  { background-color: var(--slate-12); }

/* Sage scale */
.rt-sage-1  { color: var(--sage-1); }
.rt-bg-sage-1  { background-color: var(--sage-1); }
.rt-sage-2  { color: var(--sage-2); }
.rt-bg-sage-2  { background-color: var(--sage-2); }
.rt-sage-3  { color: var(--sage-3); }
.rt-bg-sage-3  { background-color: var(--sage-3); }
.rt-sage-4  { color: var(--sage-4); }
.rt-bg-sage-4  { background-color: var(--sage-4); }
.rt-sage-5  { color: var(--sage-5); }
.rt-bg-sage-5  { background-color: var(--sage-5); }
.rt-sage-6  { color: var(--sage-6); }
.rt-bg-sage-6  { background-color: var(--sage-6); }
.rt-sage-7  { color: var(--sage-7); }
.rt-bg-sage-7  { background-color: var(--sage-7); }
.rt-sage-8  { color: var(--sage-8); }
.rt-bg-sage-8  { background-color: var(--sage-8); }
.rt-sage-9  { color: var(--sage-9); }
.rt-bg-sage-9  { background-color: var(--sage-9); }
.rt-sage-10  { color: var(--sage-10); }
.rt-bg-sage-10  { background-color: var(--sage-10); }
.rt-sage-11  { color: var(--sage-11); }
.rt-bg-sage-11  { background-color: var(--sage-11); }
.rt-sage-12  { color: var(--sage-12); }
.rt-bg-sage-12  { background-color: var(--sage-12); }

/* Olive scale */
.rt-olive-1  { color: var(--olive-1); }
.rt-bg-olive-1  { background-color: var(--olive-1); }
.rt-olive-2  { color: var(--olive-2); }
.rt-bg-olive-2  { background-color: var(--olive-2); }
.rt-olive-3  { color: var(--olive-3); }
.rt-bg-olive-3  { background-color: var(--olive-3); }
.rt-olive-4  { color: var(--olive-4); }
.rt-bg-olive-4  { background-color: var(--olive-4); }
.rt-olive-5  { color: var(--olive-5); }
.rt-bg-olive-5  { background-color: var(--olive-5); }
.rt-olive-6  { color: var(--olive-6); }
.rt-bg-olive-6  { background-color: var(--olive-6); }
.rt-olive-7  { color: var(--olive-7); }
.rt-bg-olive-7  { background-color: var(--olive-7); }
.rt-olive-8  { color: var(--olive-8); }
.rt-bg-olive-8  { background-color: var(--olive-8); }
.rt-olive-9  { color: var(--olive-9); }
.rt-bg-olive-9  { background-color: var(--olive-9); }
.rt-olive-10  { color: var(--olive-10); }
.rt-bg-olive-10  { background-color: var(--olive-10); }
.rt-olive-11  { color: var(--olive-11); }
.rt-bg-olive-11  { background-color: var(--olive-11); }
.rt-olive-12  { color: var(--olive-12); }
.rt-bg-olive-12  { background-color: var(--olive-12); }

/* Sand scale */
.rt-sand-1  { color: var(--sand-1); }
.rt-bg-sand-1  { background-color: var(--sand-1); }
.rt-sand-2  { color: var(--sand-2); }
.rt-bg-sand-2  { background-color: var(--sand-2); }
.rt-sand-3  { color: var(--sand-3); }
.rt-bg-sand-3  { background-color: var(--sand-3); }
.rt-sand-4  { color: var(--sand-4); }
.rt-bg-sand-4  { background-color: var(--sand-4); }
.rt-sand-5  { color: var(--sand-5); }
.rt-bg-sand-5  { background-color: var(--sand-5); }
.rt-sand-6  { color: var(--sand-6); }
.rt-bg-sand-6  { background-color: var(--sand-6); }
.rt-sand-7  { color: var(--sand-7); }
.rt-bg-sand-7  { background-color: var(--sand-7); }
.rt-sand-8  { color: var(--sand-8); }
.rt-bg-sand-8  { background-color: var(--sand-8); }
.rt-sand-9  { color: var(--sand-9); }
.rt-bg-sand-9  { background-color: var(--sand-9); }
.rt-sand-10  { color: var(--sand-10); }
.rt-bg-sand-10  { background-color: var(--sand-10); }
.rt-sand-11  { color: var(--sand-11); }
.rt-bg-sand-11  { background-color: var(--sand-11); }
.rt-sand-12  { color: var(--sand-12); }
.rt-bg-sand-12  { background-color: var(--sand-12); }

/* Tomato scale */
.rt-tomato-1  { color: var(--tomato-1); }
.rt-bg-tomato-1  { background-color: var(--tomato-1); }
.rt-tomato-2  { color: var(--tomato-2); }
.rt-bg-tomato-2  { background-color: var(--tomato-2); }
.rt-tomato-3  { color: var(--tomato-3); }
.rt-bg-tomato-3  { background-color: var(--tomato-3); }
.rt-tomato-4  { color: var(--tomato-4); }
.rt-bg-tomato-4  { background-color: var(--tomato-4); }
.rt-tomato-5  { color: var(--tomato-5); }
.rt-bg-tomato-5  { background-color: var(--tomato-5); }
.rt-tomato-6  { color: var(--tomato-6); }
.rt-bg-tomato-6  { background-color: var(--tomato-6); }
.rt-tomato-7  { color: var(--tomato-7); }
.rt-bg-tomato-7  { background-color: var(--tomato-7); }
.rt-tomato-8  { color: var(--tomato-8); }
.rt-bg-tomato-8  { background-color: var(--tomato-8); }
.rt-tomato-9  { color: var(--tomato-9); }
.rt-bg-tomato-9  { background-color: var(--tomato-9); }
.rt-tomato-10  { color: var(--tomato-10); }
.rt-bg-tomato-10  { background-color: var(--tomato-10); }
.rt-tomato-11  { color: var(--tomato-11); }
.rt-bg-tomato-11  { background-color: var(--tomato-11); }
.rt-tomato-12  { color: var(--tomato-12); }
.rt-bg-tomato-12  { background-color: var(--tomato-12); }

/* Red scale */
.rt-red-1  { color: var(--red-1); }
.rt-bg-red-1  { background-color: var(--red-1); }
.rt-red-2  { color: var(--red-2); }
.rt-bg-red-2  { background-color: var(--red-2); }
.rt-red-3  { color: var(--red-3); }
.rt-bg-red-3  { background-color: var(--red-3); }
.rt-red-4  { color: var(--red-4); }
.rt-bg-red-4  { background-color: var(--red-4); }
.rt-red-5  { color: var(--red-5); }
.rt-bg-red-5  { background-color: var(--red-5); }
.rt-red-6  { color: var(--red-6); }
.rt-bg-red-6  { background-color: var(--red-6); }
.rt-red-7  { color: var(--red-7); }
.rt-bg-red-7  { background-color: var(--red-7); }
.rt-red-8  { color: var(--red-8); }
.rt-bg-red-8  { background-color: var(--red-8); }
.rt-red-9  { color: var(--red-9); }
.rt-bg-red-9  { background-color: var(--red-9); }
.rt-red-10  { color: var(--red-10); }
.rt-bg-red-10  { background-color: var(--red-10); }
.rt-red-11  { color: var(--red-11); }
.rt-bg-red-11  { background-color: var(--red-11); }
.rt-red-12  { color: var(--red-12); }
.rt-bg-red-12  { background-color: var(--red-12); }

/* Ruby scale */
.rt-ruby-1  { color: var(--ruby-1); }
.rt-bg-ruby-1  { background-color: var(--ruby-1); }
.rt-ruby-2  { color: var(--ruby-2); }
.rt-bg-ruby-2  { background-color: var(--ruby-2); }
.rt-ruby-3  { color: var(--ruby-3); }
.rt-bg-ruby-3  { background-color: var(--ruby-3); }
.rt-ruby-4  { color: var(--ruby-4); }
.rt-bg-ruby-4  { background-color: var(--ruby-4); }
.rt-ruby-5  { color: var(--ruby-5); }
.rt-bg-ruby-5  { background-color: var(--ruby-5); }
.rt-ruby-6  { color: var(--ruby-6); }
.rt-bg-ruby-6  { background-color: var(--ruby-6); }
.rt-ruby-7  { color: var(--ruby-7); }
.rt-bg-ruby-7  { background-color: var(--ruby-7); }
.rt-ruby-8  { color: var(--ruby-8); }
.rt-bg-ruby-8  { background-color: var(--ruby-8); }
.rt-ruby-9  { color: var(--ruby-9); }
.rt-bg-ruby-9  { background-color: var(--ruby-9); }
.rt-ruby-10  { color: var(--ruby-10); }
.rt-bg-ruby-10  { background-color: var(--ruby-10); }
.rt-ruby-11  { color: var(--ruby-11); }
.rt-bg-ruby-11  { background-color: var(--ruby-11); }
.rt-ruby-12  { color: var(--ruby-12); }
.rt-bg-ruby-12  { background-color: var(--ruby-12); }

/* Crimson scale */
.rt-crimson-1  { color: var(--crimson-1); }
.rt-bg-crimson-1  { background-color: var(--crimson-1); }
.rt-crimson-2  { color: var(--crimson-2); }
.rt-bg-crimson-2  { background-color: var(--crimson-2); }
.rt-crimson-3  { color: var(--crimson-3); }
.rt-bg-crimson-3  { background-color: var(--crimson-3); }
.rt-crimson-4  { color: var(--crimson-4); }
.rt-bg-crimson-4  { background-color: var(--crimson-4); }
.rt-crimson-5  { color: var(--crimson-5); }
.rt-bg-crimson-5  { background-color: var(--crimson-5); }
.rt-crimson-6  { color: var(--crimson-6); }
.rt-bg-crimson-6  { background-color: var(--crimson-6); }
.rt-crimson-7  { color: var(--crimson-7); }
.rt-bg-crimson-7  { background-color: var(--crimson-7); }
.rt-crimson-8  { color: var(--crimson-8); }
.rt-bg-crimson-8  { background-color: var(--crimson-8); }
.rt-crimson-9  { color: var(--crimson-9); }
.rt-bg-crimson-9  { background-color: var(--crimson-9); }
.rt-crimson-10  { color: var(--crimson-10); }
.rt-bg-crimson-10  { background-color: var(--crimson-10); }
.rt-crimson-11  { color: var(--crimson-11); }
.rt-bg-crimson-11  { background-color: var(--crimson-11); }
.rt-crimson-12  { color: var(--crimson-12); }
.rt-bg-crimson-12  { background-color: var(--crimson-12); }

/* Pink scale */
.rt-pink-1  { color: var(--pink-1); }
.rt-bg-pink-1  { background-color: var(--pink-1); }
.rt-pink-2  { color: var(--pink-2); }
.rt-bg-pink-2  { background-color: var(--pink-2); }
.rt-pink-3  { color: var(--pink-3); }
.rt-bg-pink-3  { background-color: var(--pink-3); }
.rt-pink-4  { color: var(--pink-4); }
.rt-bg-pink-4  { background-color: var(--pink-4); }
.rt-pink-5  { color: var(--pink-5); }
.rt-bg-pink-5  { background-color: var(--pink-5); }
.rt-pink-6  { color: var(--pink-6); }
.rt-bg-pink-6  { background-color: var(--pink-6); }
.rt-pink-7  { color: var(--pink-7); }
.rt-bg-pink-7  { background-color: var(--pink-7); }
.rt-pink-8  { color: var(--pink-8); }
.rt-bg-pink-8  { background-color: var(--pink-8); }
.rt-pink-9  { color: var(--pink-9); }
.rt-bg-pink-9  { background-color: var(--pink-9); }
.rt-pink-10  { color: var(--pink-10); }
.rt-bg-pink-10  { background-color: var(--pink-10); }
.rt-pink-11  { color: var(--pink-11); }
.rt-bg-pink-11  { background-color: var(--pink-11); }
.rt-pink-12  { color: var(--pink-12); }
.rt-bg-pink-12  { background-color: var(--pink-12); }

/* Plum scale */
.rt-plum-1  { color: var(--plum-1); }
.rt-bg-plum-1  { background-color: var(--plum-1); }
.rt-plum-2  { color: var(--plum-2); }
.rt-bg-plum-2  { background-color: var(--plum-2); }
.rt-plum-3  { color: var(--plum-3); }
.rt-bg-plum-3  { background-color: var(--plum-3); }
.rt-plum-4  { color: var(--plum-4); }
.rt-bg-plum-4  { background-color: var(--plum-4); }
.rt-plum-5  { color: var(--plum-5); }
.rt-bg-plum-5  { background-color: var(--plum-5); }
.rt-plum-6  { color: var(--plum-6); }
.rt-bg-plum-6  { background-color: var(--plum-6); }
.rt-plum-7  { color: var(--plum-7); }
.rt-bg-plum-7  { background-color: var(--plum-7); }
.rt-plum-8  { color: var(--plum-8); }
.rt-bg-plum-8  { background-color: var(--plum-8); }
.rt-plum-9  { color: var(--plum-9); }
.rt-bg-plum-9  { background-color: var(--plum-9); }
.rt-plum-10  { color: var(--plum-10); }
.rt-bg-plum-10  { background-color: var(--plum-10); }
.rt-plum-11  { color: var(--plum-11); }
.rt-bg-plum-11  { background-color: var(--plum-11); }
.rt-plum-12  { color: var(--plum-12); }
.rt-bg-plum-12  { background-color: var(--plum-12); }

/* Purple scale */
.rt-purple-1  { color: var(--purple-1); }
.rt-bg-purple-1  { background-color: var(--purple-1); }
.rt-purple-2  { color: var(--purple-2); }
.rt-bg-purple-2  { background-color: var(--purple-2); }
.rt-purple-3  { color: var(--purple-3); }
.rt-bg-purple-3  { background-color: var(--purple-3); }
.rt-purple-4  { color: var(--purple-4); }
.rt-bg-purple-4  { background-color: var(--purple-4); }
.rt-purple-5  { color: var(--purple-5); }
.rt-bg-purple-5  { background-color: var(--purple-5); }
.rt-purple-6  { color: var(--purple-6); }
.rt-bg-purple-6  { background-color: var(--purple-6); }
.rt-purple-7  { color: var(--purple-7); }
.rt-bg-purple-7  { background-color: var(--purple-7); }
.rt-purple-8  { color: var(--purple-8); }
.rt-bg-purple-8  { background-color: var(--purple-8); }
.rt-purple-9  { color: var(--purple-9); }
.rt-bg-purple-9  { background-color: var(--purple-9); }
.rt-purple-10  { color: var(--purple-10); }
.rt-bg-purple-10  { background-color: var(--purple-10); }
.rt-purple-11  { color: var(--purple-11); }
.rt-bg-purple-11  { background-color: var(--purple-11); }
.rt-purple-12  { color: var(--purple-12); }
.rt-bg-purple-12  { background-color: var(--purple-12); }

/* Violet scale */
.rt-violet-1  { color: var(--violet-1); }
.rt-bg-violet-1  { background-color: var(--violet-1); }
.rt-violet-2  { color: var(--violet-2); }
.rt-bg-violet-2  { background-color: var(--violet-2); }
.rt-violet-3  { color: var(--violet-3); }
.rt-bg-violet-3  { background-color: var(--violet-3); }
.rt-violet-4  { color: var(--violet-4); }
.rt-bg-violet-4  { background-color: var(--violet-4); }
.rt-violet-5  { color: var(--violet-5); }
.rt-bg-violet-5  { background-color: var(--violet-5); }
.rt-violet-6  { color: var(--violet-6); }
.rt-bg-violet-6  { background-color: var(--violet-6); }
.rt-violet-7  { color: var(--violet-7); }
.rt-bg-violet-7  { background-color: var(--violet-7); }
.rt-violet-8  { color: var(--violet-8); }
.rt-bg-violet-8  { background-color: var(--violet-8); }
.rt-violet-9  { color: var(--violet-9); }
.rt-bg-violet-9  { background-color: var(--violet-9); }
.rt-violet-10  { color: var(--violet-10); }
.rt-bg-violet-10  { background-color: var(--violet-10); }
.rt-violet-11  { color: var(--violet-11); }
.rt-bg-violet-11  { background-color: var(--violet-11); }
.rt-violet-12  { color: var(--violet-12); }
.rt-bg-violet-12  { background-color: var(--violet-12); }

/* Iris scale */
.rt-iris-1  { color: var(--iris-1); }
.rt-bg-iris-1  { background-color: var(--iris-1); }
.rt-iris-2  { color: var(--iris-2); }
.rt-bg-iris-2  { background-color: var(--iris-2); }
.rt-iris-3  { color: var(--iris-3); }
.rt-bg-iris-3  { background-color: var(--iris-3); }
.rt-iris-4  { color: var(--iris-4); }
.rt-bg-iris-4  { background-color: var(--iris-4); }
.rt-iris-5  { color: var(--iris-5); }
.rt-bg-iris-5  { background-color: var(--iris-5); }
.rt-iris-6  { color: var(--iris-6); }
.rt-bg-iris-6  { background-color: var(--iris-6); }
.rt-iris-7  { color: var(--iris-7); }
.rt-bg-iris-7  { background-color: var(--iris-7); }
.rt-iris-8  { color: var(--iris-8); }
.rt-bg-iris-8  { background-color: var(--iris-8); }
.rt-iris-9  { color: var(--iris-9); }
.rt-bg-iris-9  { background-color: var(--iris-9); }
.rt-iris-10  { color: var(--iris-10); }
.rt-bg-iris-10  { background-color: var(--iris-10); }
.rt-iris-11  { color: var(--iris-11); }
.rt-bg-iris-11  { background-color: var(--iris-11); }
.rt-iris-12  { color: var(--iris-12); }
.rt-bg-iris-12  { background-color: var(--iris-12); }

/* Indigo scale */
.rt-indigo-1  { color: var(--indigo-1); }
.rt-bg-indigo-1  { background-color: var(--indigo-1); }
.rt-indigo-2  { color: var(--indigo-2); }
.rt-bg-indigo-2  { background-color: var(--indigo-2); }
.rt-indigo-3  { color: var(--indigo-3); }
.rt-bg-indigo-3  { background-color: var(--indigo-3); }
.rt-indigo-4  { color: var(--indigo-4); }
.rt-bg-indigo-4  { background-color: var(--indigo-4); }
.rt-indigo-5  { color: var(--indigo-5); }
.rt-bg-indigo-5  { background-color: var(--indigo-5); }
.rt-indigo-6  { color: var(--indigo-6); }
.rt-bg-indigo-6  { background-color: var(--indigo-6); }
.rt-indigo-7  { color: var(--indigo-7); }
.rt-bg-indigo-7  { background-color: var(--indigo-7); }
.rt-indigo-8  { color: var(--indigo-8); }
.rt-bg-indigo-8  { background-color: var(--indigo-8); }
.rt-indigo-9  { color: var(--indigo-9); }
.rt-bg-indigo-9  { background-color: var(--indigo-9); }
.rt-indigo-10  { color: var(--indigo-10); }
.rt-bg-indigo-10  { background-color: var(--indigo-10); }
.rt-indigo-11  { color: var(--indigo-11); }
.rt-bg-indigo-11  { background-color: var(--indigo-11); }
.rt-indigo-12  { color: var(--indigo-12); }
.rt-bg-indigo-12  { background-color: var(--indigo-12); }

/* Blue scale */
.rt-blue-1  { color: var(--blue-1); }
.rt-bg-blue-1  { background-color: var(--blue-1); }
.rt-blue-2  { color: var(--blue-2); }
.rt-bg-blue-2  { background-color: var(--blue-2); }
.rt-blue-3  { color: var(--blue-3); }
.rt-bg-blue-3  { background-color: var(--blue-3); }
.rt-blue-4  { color: var(--blue-4); }
.rt-bg-blue-4  { background-color: var(--blue-4); }
.rt-blue-5  { color: var(--blue-5); }
.rt-bg-blue-5  { background-color: var(--blue-5); }
.rt-blue-6  { color: var(--blue-6); }
.rt-bg-blue-6  { background-color: var(--blue-6); }
.rt-blue-7  { color: var(--blue-7); }
.rt-bg-blue-7  { background-color: var(--blue-7); }
.rt-blue-8  { color: var(--blue-8); }
.rt-bg-blue-8  { background-color: var(--blue-8); }
.rt-blue-9  { color: var(--blue-9); }
.rt-bg-blue-9  { background-color: var(--blue-9); }
.rt-blue-10  { color: var(--blue-10); }
.rt-bg-blue-10  { background-color: var(--blue-10); }
.rt-blue-11  { color: var(--blue-11); }
.rt-bg-blue-11  { background-color: var(--blue-11); }
.rt-blue-12  { color: var(--blue-12); }
.rt-bg-blue-12  { background-color: var(--blue-12); }

/* Cyan scale */
.rt-cyan-1  { color: var(--cyan-1); }
.rt-bg-cyan-1  { background-color: var(--cyan-1); }
.rt-cyan-2  { color: var(--cyan-2); }
.rt-bg-cyan-2  { background-color: var(--cyan-2); }
.rt-cyan-3  { color: var(--cyan-3); }
.rt-bg-cyan-3  { background-color: var(--cyan-3); }
.rt-cyan-4  { color: var(--cyan-4); }
.rt-bg-cyan-4  { background-color: var(--cyan-4); }
.rt-cyan-5  { color: var(--cyan-5); }
.rt-bg-cyan-5  { background-color: var(--cyan-5); }
.rt-cyan-6  { color: var(--cyan-6); }
.rt-bg-cyan-6  { background-color: var(--cyan-6); }
.rt-cyan-7  { color: var(--cyan-7); }
.rt-bg-cyan-7  { background-color: var(--cyan-7); }
.rt-cyan-8  { color: var(--cyan-8); }
.rt-bg-cyan-8  { background-color: var(--cyan-8); }
.rt-cyan-9  { color: var(--cyan-9); }
.rt-bg-cyan-9  { background-color: var(--cyan-9); }
.rt-cyan-10  { color: var(--cyan-10); }
.rt-bg-cyan-10  { background-color: var(--cyan-10); }
.rt-cyan-11  { color: var(--cyan-11); }
.rt-bg-cyan-11  { background-color: var(--cyan-11); }
.rt-cyan-12  { color: var(--cyan-12); }
.rt-bg-cyan-12  { background-color: var(--cyan-12); }

/* Teal scale */
.rt-teal-1  { color: var(--teal-1); }
.rt-bg-teal-1  { background-color: var(--teal-1); }
.rt-teal-2  { color: var(--teal-2); }
.rt-bg-teal-2  { background-color: var(--teal-2); }
.rt-teal-3  { color: var(--teal-3); }
.rt-bg-teal-3  { background-color: var(--teal-3); }
.rt-teal-4  { color: var(--teal-4); }
.rt-bg-teal-4  { background-color: var(--teal-4); }
.rt-teal-5  { color: var(--teal-5); }
.rt-bg-teal-5  { background-color: var(--teal-5); }
.rt-teal-6  { color: var(--teal-6); }
.rt-bg-teal-6  { background-color: var(--teal-6); }
.rt-teal-7  { color: var(--teal-7); }
.rt-bg-teal-7  { background-color: var(--teal-7); }
.rt-teal-8  { color: var(--teal-8); }
.rt-bg-teal-8  { background-color: var(--teal-8); }
.rt-teal-9  { color: var(--teal-9); }
.rt-bg-teal-9  { background-color: var(--teal-9); }
.rt-teal-10  { color: var(--teal-10); }
.rt-bg-teal-10  { background-color: var(--teal-10); }
.rt-teal-11  { color: var(--teal-11); }
.rt-bg-teal-11  { background-color: var(--teal-11); }
.rt-teal-12  { color: var(--teal-12); }
.rt-bg-teal-12  { background-color: var(--teal-12); }

/* Jade scale */
.rt-jade-1  { color: var(--jade-1); }
.rt-bg-jade-1  { background-color: var(--jade-1); }
.rt-jade-2  { color: var(--jade-2); }
.rt-bg-jade-2  { background-color: var(--jade-2); }
.rt-jade-3  { color: var(--jade-3); }
.rt-bg-jade-3  { background-color: var(--jade-3); }
.rt-jade-4  { color: var(--jade-4); }
.rt-bg-jade-4  { background-color: var(--jade-4); }
.rt-jade-5  { color: var(--jade-5); }
.rt-bg-jade-5  { background-color: var(--jade-5); }
.rt-jade-6  { color: var(--jade-6); }
.rt-bg-jade-6  { background-color: var(--jade-6); }
.rt-jade-7  { color: var(--jade-7); }
.rt-bg-jade-7  { background-color: var(--jade-7); }
.rt-jade-8  { color: var(--jade-8); }
.rt-bg-jade-8  { background-color: var(--jade-8); }
.rt-jade-9  { color: var(--jade-9); }
.rt-bg-jade-9  { background-color: var(--jade-9); }
.rt-jade-10  { color: var(--jade-10); }
.rt-bg-jade-10  { background-color: var(--jade-10); }
.rt-jade-11  { color: var(--jade-11); }
.rt-bg-jade-11  { background-color: var(--jade-11); }
.rt-jade-12  { color: var(--jade-12); }
.rt-bg-jade-12  { background-color: var(--jade-12); }

/* Grass scale */
.rt-grass-1  { color: var(--grass-1); }
.rt-bg-grass-1  { background-color: var(--grass-1); }
.rt-grass-2  { color: var(--grass-2); }
.rt-bg-grass-2  { background-color: var(--grass-2); }
.rt-grass-3  { color: var(--grass-3); }
.rt-bg-grass-3  { background-color: var(--grass-3); }
.rt-grass-4  { color: var(--grass-4); }
.rt-bg-grass-4  { background-color: var(--grass-4); }
.rt-grass-5  { color: var(--grass-5); }
.rt-bg-grass-5  { background-color: var(--grass-5); }
.rt-grass-6  { color: var(--grass-6); }
.rt-bg-grass-6  { background-color: var(--grass-6); }
.rt-grass-7  { color: var(--grass-7); }
.rt-bg-grass-7  { background-color: var(--grass-7); }
.rt-grass-8  { color: var(--grass-8); }
.rt-bg-grass-8  { background-color: var(--grass-8); }
.rt-grass-9  { color: var(--grass-9); }
.rt-bg-grass-9  { background-color: var(--grass-9); }
.rt-grass-10  { color: var(--grass-10); }
.rt-bg-grass-10  { background-color: var(--grass-10); }
.rt-grass-11  { color: var(--grass-11); }
.rt-bg-grass-11  { background-color: var(--grass-11); }
.rt-grass-12  { color: var(--grass-12); }
.rt-bg-grass-12  { background-color: var(--grass-12); }

/* Lime scale */
.rt-lime-1  { color: var(--lime-1); }
.rt-bg-lime-1  { background-color: var(--lime-1); }
.rt-lime-2  { color: var(--lime-2); }
.rt-bg-lime-2  { background-color: var(--lime-2); }
.rt-lime-3  { color: var(--lime-3); }
.rt-bg-lime-3  { background-color: var(--lime-3); }
.rt-lime-4  { color: var(--lime-4); }
.rt-bg-lime-4  { background-color: var(--lime-4); }
.rt-lime-5  { color: var(--lime-5); }
.rt-bg-lime-5  { background-color: var(--lime-5); }
.rt-lime-6  { color: var(--lime-6); }
.rt-bg-lime-6  { background-color: var(--lime-6); }
.rt-lime-7  { color: var(--lime-7); }
.rt-bg-lime-7  { background-color: var(--lime-7); }
.rt-lime-8  { color: var(--lime-8); }
.rt-bg-lime-8  { background-color: var(--lime-8); }
.rt-lime-9  { color: var(--lime-9); }
.rt-bg-lime-9  { background-color: var(--lime-9); }
.rt-lime-10  { color: var(--lime-10); }
.rt-bg-lime-10  { background-color: var(--lime-10); }
.rt-lime-11  { color: var(--lime-11); }
.rt-bg-lime-11  { background-color: var(--lime-11); }
.rt-lime-12  { color: var(--lime-12); }
.rt-bg-lime-12  { background-color: var(--lime-12); }

/* Mint scale */
.rt-mint-1  { color: var(--mint-1); }
.rt-bg-mint-1  { background-color: var(--mint-1); }
.rt-mint-2  { color: var(--mint-2); }
.rt-bg-mint-2  { background-color: var(--mint-2); }
.rt-mint-3  { color: var(--mint-3); }
.rt-bg-mint-3  { background-color: var(--mint-3); }
.rt-mint-4  { color: var(--mint-4); }
.rt-bg-mint-4  { background-color: var(--mint-4); }
.rt-mint-5  { color: var(--mint-5); }
.rt-bg-mint-5  { background-color: var(--mint-5); }
.rt-mint-6  { color: var(--mint-6); }
.rt-bg-mint-6  { background-color: var(--mint-6); }
.rt-mint-7  { color: var(--mint-7); }
.rt-bg-mint-7  { background-color: var(--mint-7); }
.rt-mint-8  { color: var(--mint-8); }
.rt-bg-mint-8  { background-color: var(--mint-8); }
.rt-mint-9  { color: var(--mint-9); }
.rt-bg-mint-9  { background-color: var(--mint-9); }
.rt-mint-10  { color: var(--mint-10); }
.rt-bg-mint-10  { background-color: var(--mint-10); }
.rt-mint-11  { color: var(--mint-11); }
.rt-bg-mint-11  { background-color: var(--mint-11); }
.rt-mint-12  { color: var(--mint-12); }
.rt-bg-mint-12  { background-color: var(--mint-12); }

/* Sky scale */
.rt-sky-1  { color: var(--sky-1); }
.rt-bg-sky-1  { background-color: var(--sky-1); }
.rt-sky-2  { color: var(--sky-2); }
.rt-bg-sky-2  { background-color: var(--sky-2); }
.rt-sky-3  { color: var(--sky-3); }
.rt-bg-sky-3  { background-color: var(--sky-3); }
.rt-sky-4  { color: var(--sky-4); }
.rt-bg-sky-4  { background-color: var(--sky-4); }
.rt-sky-5  { color: var(--sky-5); }
.rt-bg-sky-5  { background-color: var(--sky-5); }
.rt-sky-6  { color: var(--sky-6); }
.rt-bg-sky-6  { background-color: var(--sky-6); }
.rt-sky-7  { color: var(--sky-7); }
.rt-bg-sky-7  { background-color: var(--sky-7); }
.rt-sky-8  { color: var(--sky-8); }
.rt-bg-sky-8  { background-color: var(--sky-8); }
.rt-sky-9  { color: var(--sky-9); }
.rt-bg-sky-9  { background-color: var(--sky-9); }
.rt-sky-10  { color: var(--sky-10); }
.rt-bg-sky-10  { background-color: var(--sky-10); }
.rt-sky-11  { color: var(--sky-11); }
.rt-bg-sky-11  { background-color: var(--sky-11); }
.rt-sky-12  { color: var(--sky-12); }
.rt-bg-sky-12  { background-color: var(--sky-12); }

/* Yellow scale */
.rt-yellow-1  { color: var(--yellow-1); }
.rt-bg-yellow-1  { background-color: var(--yellow-1); }
.rt-yellow-2  { color: var(--yellow-2); }
.rt-bg-yellow-2  { background-color: var(--yellow-2); }
.rt-yellow-3  { color: var(--yellow-3); }
.rt-bg-yellow-3  { background-color: var(--yellow-3); }
.rt-yellow-4  { color: var(--yellow-4); }
.rt-bg-yellow-4  { background-color: var(--yellow-4); }
.rt-yellow-5  { color: var(--yellow-5); }
.rt-bg-yellow-5  { background-color: var(--yellow-5); }
.rt-yellow-6  { color: var(--yellow-6); }
.rt-bg-yellow-6  { background-color: var(--yellow-6); }
.rt-yellow-7  { color: var(--yellow-7); }
.rt-bg-yellow-7  { background-color: var(--yellow-7); }
.rt-yellow-8  { color: var(--yellow-8); }
.rt-bg-yellow-8  { background-color: var(--yellow-8); }
.rt-yellow-9  { color: var(--yellow-9); }
.rt-bg-yellow-9  { background-color: var(--yellow-9); }
.rt-yellow-10  { color: var(--yellow-10); }
.rt-bg-yellow-10  { background-color: var(--yellow-10); }
.rt-yellow-11  { color: var(--yellow-11); }
.rt-bg-yellow-11  { background-color: var(--yellow-11); }
.rt-yellow-12  { color: var(--yellow-12); }
.rt-bg-yellow-12  { background-color: var(--yellow-12); }

/* Amber scale */
.rt-amber-1  { color: var(--amber-1); }
.rt-bg-amber-1  { background-color: var(--amber-1); }
.rt-amber-2  { color: var(--amber-2); }
.rt-bg-amber-2  { background-color: var(--amber-2); }
.rt-amber-3  { color: var(--amber-3); }
.rt-bg-amber-3  { background-color: var(--amber-3); }
.rt-amber-4  { color: var(--amber-4); }
.rt-bg-amber-4  { background-color: var(--amber-4); }
.rt-amber-5  { color: var(--amber-5); }
.rt-bg-amber-5  { background-color: var(--amber-5); }
.rt-amber-6  { color: var(--amber-6); }
.rt-bg-amber-6  { background-color: var(--amber-6); }
.rt-amber-7  { color: var(--amber-7); }
.rt-bg-amber-7  { background-color: var(--amber-7); }
.rt-amber-8  { color: var(--amber-8); }
.rt-bg-amber-8  { background-color: var(--amber-8); }
.rt-amber-9  { color: var(--amber-9); }
.rt-bg-amber-9  { background-color: var(--amber-9); }
.rt-amber-10  { color: var(--amber-10); }
.rt-bg-amber-10  { background-color: var(--amber-10); }
.rt-amber-11  { color: var(--amber-11); }
.rt-bg-amber-11  { background-color: var(--amber-11); }
.rt-amber-12  { color: var(--amber-12); }
.rt-bg-amber-12  { background-color: var(--amber-12); }

/* Orange scale */
.rt-orange-1  { color: var(--orange-1); }
.rt-bg-orange-1  { background-color: var(--orange-1); }
.rt-orange-2  { color: var(--orange-2); }
.rt-bg-orange-2  { background-color: var(--orange-2); }
.rt-orange-3  { color: var(--orange-3); }
.rt-bg-orange-3  { background-color: var(--orange-3); }
.rt-orange-4  { color: var(--orange-4); }
.rt-bg-orange-4  { background-color: var(--orange-4); }
.rt-orange-5  { color: var(--orange-5); }
.rt-bg-orange-5  { background-color: var(--orange-5); }
.rt-orange-6  { color: var(--orange-6); }
.rt-bg-orange-6  { background-color: var(--orange-6); }
.rt-orange-7  { color: var(--orange-7); }
.rt-bg-orange-7  { background-color: var(--orange-7); }
.rt-orange-8  { color: var(--orange-8); }
.rt-bg-orange-8  { background-color: var(--orange-8); }
.rt-orange-9  { color: var(--orange-9); }
.rt-bg-orange-9  { background-color: var(--orange-9); }
.rt-orange-10  { color: var(--orange-10); }
.rt-bg-orange-10  { background-color: var(--orange-10); }
.rt-orange-11  { color: var(--orange-11); }
.rt-bg-orange-11  { background-color: var(--orange-11); }
.rt-orange-12  { color: var(--orange-12); }
.rt-bg-orange-12  { background-color: var(--orange-12); }

/* Brown scale */
.rt-brown-1  { color: var(--brown-1); }
.rt-bg-brown-1  { background-color: var(--brown-1); }
.rt-brown-2  { color: var(--brown-2); }
.rt-bg-brown-2  { background-color: var(--brown-2); }
.rt-brown-3  { color: var(--brown-3); }
.rt-bg-brown-3  { background-color: var(--brown-3); }
.rt-brown-4  { color: var(--brown-4); }
.rt-bg-brown-4  { background-color: var(--brown-4); }
.rt-brown-5  { color: var(--brown-5); }
.rt-bg-brown-5  { background-color: var(--brown-5); }
.rt-brown-6  { color: var(--brown-6); }
.rt-bg-brown-6  { background-color: var(--brown-6); }
.rt-brown-7  { color: var(--brown-7); }
.rt-bg-brown-7  { background-color: var(--brown-7); }
.rt-brown-8  { color: var(--brown-8); }
.rt-bg-brown-8  { background-color: var(--brown-8); }
.rt-brown-9  { color: var(--brown-9); }
.rt-bg-brown-9  { background-color: var(--brown-9); }
.rt-brown-10  { color: var(--brown-10); }
.rt-bg-brown-10  { background-color: var(--brown-10); }
.rt-brown-11  { color: var(--brown-11); }
.rt-bg-brown-11  { background-color: var(--brown-11); }
.rt-brown-12  { color: var(--brown-12); }
.rt-bg-brown-12  { background-color: var(--brown-12); }

/* Bronze scale */
.rt-bronze-1  { color: var(--bronze-1); }
.rt-bg-bronze-1  { background-color: var(--bronze-1); }
.rt-bronze-2  { color: var(--bronze-2); }
.rt-bg-bronze-2  { background-color: var(--bronze-2); }
.rt-bronze-3  { color: var(--bronze-3); }
.rt-bg-bronze-3  { background-color: var(--bronze-3); }
.rt-bronze-4  { color: var(--bronze-4); }
.rt-bg-bronze-4  { background-color: var(--bronze-4); }
.rt-bronze-5  { color: var(--bronze-5); }
.rt-bg-bronze-5  { background-color: var(--bronze-5); }
.rt-bronze-6  { color: var(--bronze-6); }
.rt-bg-bronze-6  { background-color: var(--bronze-6); }
.rt-bronze-7  { color: var(--bronze-7); }
.rt-bg-bronze-7  { background-color: var(--bronze-7); }
.rt-bronze-8  { color: var(--bronze-8); }
.rt-bg-bronze-8  { background-color: var(--bronze-8); }
.rt-bronze-9  { color: var(--bronze-9); }
.rt-bg-bronze-9  { background-color: var(--bronze-9); }
.rt-bronze-10  { color: var(--bronze-10); }
.rt-bg-bronze-10  { background-color: var(--bronze-10); }
.rt-bronze-11  { color: var(--bronze-11); }
.rt-bg-bronze-11  { background-color: var(--bronze-11); }
.rt-bronze-12  { color: var(--bronze-12); }
.rt-bg-bronze-12  { background-color: var(--bronze-12); }

/* Gold scale */
.rt-gold-1  { color: var(--gold-1); }
.rt-bg-gold-1  { background-color: var(--gold-1); }
.rt-gold-2  { color: var(--gold-2); }
.rt-bg-gold-2  { background-color: var(--gold-2); }
.rt-gold-3  { color: var(--gold-3); }
.rt-bg-gold-3  { background-color: var(--gold-3); }
.rt-gold-4  { color: var(--gold-4); }
.rt-bg-gold-4  { background-color: var(--gold-4); }
.rt-gold-5  { color: var(--gold-5); }
.rt-bg-gold-5  { background-color: var(--gold-5); }
.rt-gold-6  { color: var(--gold-6); }
.rt-bg-gold-6  { background-color: var(--gold-6); }
.rt-gold-7  { color: var(--gold-7); }
.rt-bg-gold-7  { background-color: var(--gold-7); }
.rt-gold-8  { color: var(--gold-8); }
.rt-bg-gold-8  { background-color: var(--gold-8); }
.rt-gold-9  { color: var(--gold-9); }
.rt-bg-gold-9  { background-color: var(--gold-9); }
.rt-gold-10  { color: var(--gold-10); }
.rt-bg-gold-10  { background-color: var(--gold-10); }
.rt-gold-11  { color: var(--gold-11); }
.rt-bg-gold-11  { background-color: var(--gold-11); }
.rt-gold-12  { color: var(--gold-12); }
.rt-bg-gold-12  { background-color: var(--gold-12); }