/* ============================================================
   HQu design tokens — single source of truth for color.
   Brand palette (exact Qu hexes, do not approximate):
     Qu blue    #1e35af   (primary)
     Qu yellow  #e9c46a   (accent)
     Off-white  #f8f9f0   (base background)
   Every component references these variables. Change here, change everywhere.
   ============================================================ */

:root {
  /* Raw brand constants (never used directly in components; map to roles below) */
  --qu-blue:      #1e3a5f;
  --qu-yellow:    #e9c46a;
  --qu-off-white: #f8f9f0;

  /* Blue tints/shades derived for hover, borders, surfaces */
  --qu-blue-700:  #152943;   /* darker navy, for pressed/hover on blue */
  --qu-blue-300:  #6f8bb0;   /* lighter navy, for dark-mode primary */
  --qu-blue-050:  #e9eef4;   /* faint navy wash */

  /* Yellow shades */
  --qu-yellow-600: #d9ad4a;  /* darker yellow for text-on-light accents */

  /* Neutral ink (warm-tinted to sit with the off-white) */
  --ink-900: #16181d;
  --ink-700: #3a3f4a;
  --ink-500: #6b7280;
  --ink-300: #c7cad2;

  /* ---- Semantic roles (LIGHT MODE) ---- */
  --bg:            var(--qu-off-white);
  --bg-elevated:   #ffffff;          /* cards, panels */
  --bg-sunken:     #eef0e6;          /* board columns, wells */
  --surface-border: #e2e4d8;

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-on-primary: var(--qu-off-white);
  --text-on-accent:  var(--ink-900);

  --primary:        var(--qu-blue);
  --primary-hover:  var(--qu-blue-700);
  --primary-wash:   var(--qu-blue-050);

  --accent:         var(--qu-yellow);
  --accent-strong:  var(--qu-yellow-600);

  --focus-ring:     var(--qu-blue);
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.06), 0 4px 16px rgba(22, 24, 29, 0.06);

  /* Non-color tokens kept central too */
  --radius:   12px;
  --radius-sm: 8px;
  --space:    16px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- DARK MODE ----
   Deep blue-black base derived from Qu blue so the brand still reads.
   Primary lightens (blue-300) for contrast on dark; yellow accent stays. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0e1020;
    --bg-elevated:   #171a2e;
    --bg-sunken:     #0a0c18;
    --surface-border: #262a45;

    --text:          var(--qu-off-white);
    --text-muted:    #9aa0b5;
    --text-on-primary: #0e1020;
    --text-on-accent:  #16181d;

    --primary:        var(--qu-blue-300);
    --primary-hover:  #8b99e0;
    --primary-wash:   #1b2140;

    --accent:         var(--qu-yellow);
    --accent-strong:  var(--qu-yellow);

    --focus-ring:     var(--qu-blue-300);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}