/* BlitzApps teaching-applet theme
   Palette: https://coolors.co/palette/1d3ad8-005f6f-5296a2-5084b6-faed7f-fdb55e-e98251-019e73-0072b2-d55e00

   Semantic roles pick widely separated hues for contrast:
   a = green, b = bright blue, c = coral, whole = amber
*/

:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ba-ink);

  --ba-bg: #f7f8fa;
  --ba-surface: #ffffff;
  --ba-ink: #1a2430;
  --ba-muted: #5a6674;
  --ba-line: #6b7886;
  --ba-border: #cfd6de;
  --ba-on-fill: #f8fafb;

  /* Coolors source swatches */
  --ba-swatch-blue-bright: #1d3ad8;
  --ba-swatch-teal-deep: #005f6f;
  --ba-swatch-teal: #5296a2;
  --ba-swatch-blue: #5084b6;
  --ba-swatch-yellow: #faed7f;
  --ba-swatch-amber: #fdb55e;
  --ba-swatch-coral: #e98251;
  --ba-swatch-green: #019e73;
  --ba-swatch-blue-deep: #0072b2;
  --ba-swatch-orange-deep: #d55e00;

  /*
    Role tokens:
    - color  = fill for chips / pills / buttons
    - *-ink  = text ON that fill (light on dark fills; dark on light fills)
    - *-deep = dark text on soft / light backgrounds
    - *-soft = pale panel behind content
  */

  /* Green — strong mid hue */
  --ba-green: var(--ba-swatch-green);
  --ba-green-ink: var(--ba-on-fill);
  --ba-green-deep: #016b4e;
  --ba-green-soft: #dff5ec;

  /* Bright blue — high contrast vs green/coral */
  --ba-blue: var(--ba-swatch-blue-bright);
  --ba-blue-ink: var(--ba-on-fill);
  --ba-blue-deep: #1428a0;
  --ba-blue-soft: #e4e9fb;

  /* Coral — warm opposite of blue */
  --ba-coral: var(--ba-swatch-coral);
  --ba-coral-ink: var(--ba-on-fill);
  --ba-coral-deep: var(--ba-swatch-orange-deep);
  --ba-coral-soft: #fceee6;

  /* Amber — light fill needs dark on-fill text */
  --ba-amber: var(--ba-swatch-amber);
  --ba-amber-ink: #5a3220;
  --ba-amber-deep: var(--ba-swatch-orange-deep);
  --ba-amber-soft: #fff4e5;

  /* Yellow — optional light accent */
  --ba-yellow: var(--ba-swatch-yellow);
  --ba-yellow-ink: #5a4d12;
  --ba-yellow-deep: #6b5a10;
  --ba-yellow-soft: #fff9db;

  /* Teal kept available but not used in a/b/c/whole (too close to green/blue) */
  --ba-teal: var(--ba-swatch-teal);
  --ba-teal-ink: var(--ba-on-fill);
  --ba-teal-deep: var(--ba-swatch-teal-deep);
  --ba-teal-soft: #e2eef0;

  --ba-rose: #c45c4a;
  --ba-rose-ink: var(--ba-on-fill);
  --ba-rose-deep: #7a2e22;
  --ba-rose-soft: #f8e8e4;

  /* Semantic slots — maximize pairwise contrast */
  --ba-a: var(--ba-green);
  --ba-a-ink: var(--ba-green-ink);
  --ba-a-deep: var(--ba-green-deep);
  --ba-a-soft: var(--ba-green-soft);

  --ba-b: var(--ba-blue);
  --ba-b-ink: var(--ba-blue-ink);
  --ba-b-deep: var(--ba-blue-deep);
  --ba-b-soft: var(--ba-blue-soft);

  --ba-c: var(--ba-coral);
  --ba-c-ink: var(--ba-coral-ink);
  --ba-c-deep: var(--ba-coral-deep);
  --ba-c-soft: var(--ba-coral-soft);

  --ba-whole: var(--ba-amber);
  --ba-whole-ink: var(--ba-amber-ink);
  --ba-whole-deep: var(--ba-amber-deep);
  --ba-whole-soft: var(--ba-amber-soft);

  --ba-accent: var(--ba-swatch-blue-deep);
}

body {
  margin: 12px;
  background: var(--ba-bg);
  color: var(--ba-ink);
}

h1 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  text-align: center;
}

.controls {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 4px;
  font-weight: 600;
  font-size: 0.95rem;
}

input[type="range"] {
  width: 100%;
}

select {
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 10px;
  border: 2px solid var(--ba-border);
  background: var(--ba-surface);
  color: var(--ba-ink);
}