/* HRV — Color tokens
   Base palette drawn from the HRV wordmark (ink black + guitar-string gold)
   and the warm cream/illustration palette of the reference site
   (tomareru-ongakushitsu.net). Vivid accent added for music/entertainment energy. */

:root {
  /* ---- Base: cream/paper ---- */
  --color-cream-50:  #FCFAF4;
  --color-cream-100: #F6F0E3;   /* primary page background */
  --color-cream-200: #EEE4CE;
  --color-cream-300: #E3D5B8;

  /* ---- Base: ink (from logo) ---- */
  --color-ink-900: #1B1815;
  --color-ink-700: #37312A;
  --color-ink-500: #5C5348;
  --color-ink-300: #8B8175;

  /* ---- Base: brown (button/copy accents, from reference) ---- */
  --color-brown-900: #2E2016;
  --color-brown-700: #4B3524;
  --color-brown-500: #6E4E33;

  /* ---- Base: gold (from logo strings) ---- */
  --color-gold-300: #F0CD82;
  --color-gold-500: #E3A83B;
  --color-gold-600: #C68A22;
  --color-gold-700: #9C6C18;

  /* ---- Base: vivid accent (music/entertainment energy) ---- */
  --color-coral-300: #F1A98F;
  --color-coral-500: #E2532E;
  --color-coral-600: #C43F1E;
  --color-coral-700: #9E3117;

  /* ---- Base: secondary genre accents (event/program tagging) ---- */
  --color-teal-500:  #2F8F82;
  --color-teal-700:  #1F6459;
  --color-olive-500: #7C8A3C;
  --color-olive-700: #5C6829;
  --color-navy-500:  #2E4A6B;
  --color-navy-700:  #1F344D;

  /* ---- Neutral warm grays (ink mixed toward cream) ---- */
  --color-neutral-50:  oklch(from var(--color-cream-100) 0.98 0.008 90);
  --color-neutral-100: oklch(from var(--color-cream-100) 0.95 0.01 85);
  --color-neutral-200: oklch(from var(--color-cream-200) 0.90 0.015 80);
  --color-neutral-300: color-mix(in oklch, var(--color-ink-300) 35%, var(--color-cream-100));
  --color-neutral-400: color-mix(in oklch, var(--color-ink-300) 65%, var(--color-cream-100));
  --color-neutral-500: var(--color-ink-300);
  --color-neutral-600: var(--color-ink-500);
  --color-neutral-700: var(--color-ink-700);
  --color-neutral-800: color-mix(in oklch, var(--color-ink-900) 85%, var(--color-ink-700));
  --color-neutral-900: var(--color-ink-900);

  /* ---- Semantic surfaces ---- */
  --surface-page:      var(--color-cream-100);
  --surface-page-alt:  var(--color-cream-200);
  --surface-card:      var(--color-cream-50);
  --surface-card-alt:  #FFFFFF;
  --surface-inverse:   var(--color-ink-900);
  --surface-inverse-alt: var(--color-brown-900);

  /* ---- Semantic text ---- */
  --text-primary:    var(--color-ink-900);
  --text-secondary:  color-mix(in oklch, var(--color-ink-900) 68%, transparent);
  --text-tertiary:   color-mix(in oklch, var(--color-ink-900) 46%, transparent);
  --text-inverse:    var(--color-cream-50);
  --text-inverse-secondary: color-mix(in oklch, var(--color-cream-50) 75%, transparent);
  --text-link:       var(--color-coral-600);
  --text-link-hover:  var(--color-coral-700);

  /* ---- Semantic borders ---- */
  --border-subtle:  color-mix(in oklch, var(--color-ink-900) 12%, transparent);
  --border-default: color-mix(in oklch, var(--color-ink-900) 20%, transparent);
  --border-strong:  color-mix(in oklch, var(--color-ink-900) 40%, transparent);
  --border-inverse: color-mix(in oklch, var(--color-cream-50) 30%, transparent);

  /* ---- Semantic accents ---- */
  --accent-gold:        var(--color-gold-500);
  --accent-gold-strong: var(--color-gold-600);
  --accent-vivid:       var(--color-coral-500);
  --accent-vivid-strong: var(--color-coral-600);

  /* ---- Interactive: primary button (dark, from reference pill buttons) ---- */
  --button-primary-bg:        var(--color-brown-900);
  --button-primary-bg-hover:  var(--color-ink-900);
  --button-primary-bg-active: #000000;
  --button-primary-text:      var(--color-cream-50);

  /* ---- Interactive: vivid/CTA button ---- */
  --button-vivid-bg:        var(--color-coral-500);
  --button-vivid-bg-hover:  var(--color-coral-600);
  --button-vivid-bg-active: var(--color-coral-700);
  --button-vivid-text:      #FFFFFF;

  /* ---- Interactive: secondary (outline) button ---- */
  --button-secondary-border: var(--border-strong);
  --button-secondary-border-hover: var(--color-ink-900);
  --button-secondary-text:   var(--text-primary);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-gold-500) 55%, transparent);

  /* ---- Category tag palette (event/program taxonomy) ---- */
  --tag-community-bg: color-mix(in oklch, var(--color-gold-500) 22%, var(--surface-card));
  --tag-community-fg: var(--color-gold-700);
  --tag-csr-bg:       color-mix(in oklch, var(--color-navy-500) 16%, var(--surface-card));
  --tag-csr-fg:       var(--color-navy-700);
  --tag-welfare-bg:   color-mix(in oklch, var(--color-teal-500) 18%, var(--surface-card));
  --tag-welfare-fg:   var(--color-teal-700);
  --tag-media-bg:     color-mix(in oklch, var(--color-coral-500) 18%, var(--surface-card));
  --tag-media-fg:     var(--color-coral-700);
  --tag-program-bg:   color-mix(in oklch, var(--color-olive-500) 20%, var(--surface-card));
  --tag-program-fg:   var(--color-olive-700);
}