/*
 * Blues Piano School — colour tokens.
 * This is the ONLY file in the project allowed to contain hex values.
 * tests/test-no-hardcoded-colors.php enforces that.
 */

:root {
  /* Dark surfaces — header and hero only, roughly 8% of a page. */
  --bp-dark:       #191410;
  --bp-dark-nav:   #120E0A;
  --bp-dark-fg:    #F2EAE0;
  --bp-dark-dim:   #A2958A;
  --bp-dark-hair:  #372E25;

  /* Light surfaces — everything below the hero. */
  --bp-page:       #FFFFFF;
  --bp-band:       #F8F6F2;
  --bp-ink:        #1B1A17;
  --bp-muted:      #57534C;
  --bp-hair:       #ECE9E3;

  /*
   * Gold has two roles and they must not be swapped.
   * --bp-gold      buttons and anything on the dark hero  (8.5:1 on --bp-dark)
   * --bp-gold-deep text and icons on light surfaces       (5.0:1 on white)
   * Using --bp-gold for text on white gives 2.1:1 and fails WCAG AA.
   */
  --bp-gold:       #E3A536;
  --bp-gold-deep:  #9A6410;
  --bp-gold-tint:  #FBF2E1;

  /* Metrics — kept here so spacing is as centrally defined as colour. */
  --bp-container:  1080px;
  --bp-gutter:     24px;
  --bp-section-y:  96px;
  --bp-radius:     14px;
  --bp-radius-btn: 12px;

  /* Typefaces. */
  --bp-display: "Zilla Slab", Georgia, serif;
  --bp-body:    "Karla", system-ui, -apple-system, sans-serif;
}