/* ── PracticeDay design tokens ─────────────────────────────────────
   Every color and radius in app.css routes through these.

   Two layers, kept apart on purpose. Midphrase ruled a FAMILY palette:
   shared neutrals, typography and geometry, one accent per tool (brand
   repo, `2026_10_16 Brand and platform architecture.md` §8 item 3).

   1. FAMILY LAYER — copied from ListenQuiz app/web/tokens.css on
      2026-11-06, values unchanged. Names are cleaned up: ListenQuiz's
      --gold (no longer a gold) is not used here. When the brand repo gets
      its brand/ source (§8 item 2, still open), this layer becomes the
      generated copy. Don't tune it here; change it in ListenQuiz/brand.

   2. TOOL LAYER — PracticeDay's own: the accent (deep teal) and the piece
      colors. Provisional, chosen by Claude 2026-11-06, reviewed with the
      strings before the app goes public.

   Dark mode follows the phone's setting. There's no in-app toggle yet. */

:root {
  color-scheme: light;

  /* family */
  --bg:       #f4efe9;
  --surface:  #ffffff;
  --surface2: #eee4da;
  --surface3: #e3d6c7;
  --border:   #d9c9bd;
  --text:     #3a2f2c;
  --dim:      #5e5555;
  --red:      #a13d33;
  --green:    #3d7a4a;
  --shadow:   rgba(0, 0, 0, 0.4);
  --scrim:    rgba(0, 0, 0, 0.6);
  --r:        12px;
  --r-lg:     20px;
  --gutter:   clamp(12px, calc(12px + 8 * (100vw - 320px) / 55), 20px);

  /* tool: PracticeDay */
  --accent:      #1f5a57;  /* fills: primary button, current block */
  --accent-hi:   #2a6b67;  /* pressed */
  --on-accent:   #ffffff;
  --accent-text: #1f5a57;  /* accent as text on --bg / --surface */
  --p-red:       #b0473a;  /* Mozart */
  --p-blue:      #3c6797;  /* Mendelssohn */
  --p-orange:    #c27323;  /* Bach */
  --p-green:     #4f7d3a;
  --p-purple:    #7a4f8f;
  --p-brown:     #8a6440;
  --p-gray:      #8a7d6a;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* family (ListenQuiz palette "5b") */
    --bg:       #17120D;
    --surface:  #211A13;
    --surface2: #2A2219;
    --surface3: #362C20;
    --border:   #473B2B;
    --text:     #EFE3CD;
    --dim:      #A2947C;
    --red:      #CF8B83;
    --green:    #72947B;
    --shadow:   rgba(0, 0, 0, 0.7);
    --scrim:    rgba(0, 0, 0, 0.8);

    /* tool */
    --accent:      #2f6a66;
    --accent-hi:   #377672;
    --on-accent:   #F2E9D6;
    --accent-text: #7fb5ae;
    --p-red:       #d07a6e;
    --p-blue:      #7ea3cf;
    --p-orange:    #dd9a55;
    --p-green:     #8fb27a;
    --p-purple:    #b394c6;
    --p-brown:     #c19a74;
    --p-gray:      #8a7d6a;
  }
}