/* ─── RICHARD Color Tokens ───────────────────────────────────────── */

:root {
  /* Base palette */
  --color-black:       #0a0a0a;
  --color-cream:       #f0ece0;
  --color-white:       #ffffff;
  --color-gray-900:    #111111;
  --color-gray-700:    #2a2a2a;
  --color-gray-500:    #555555;
  --color-gray-300:    #999999;
  --color-gray-100:    #cccccc;

  /* Semantic aliases */
  --surface-page:      var(--color-black);
  --surface-elevated:  var(--color-gray-900);
  --surface-inset:     var(--color-gray-700);

  --text-display:      var(--color-cream);
  --text-primary:      var(--color-white);
  --text-secondary:    var(--color-gray-300);
  --text-disabled:     var(--color-gray-500);

  --border-default:    var(--color-white);
  --border-subtle:     var(--color-gray-700);
  --border-divider:    rgba(255,255,255,0.18);

  --button-bg:         transparent;
  --button-border:     var(--color-white);
  --button-text:       var(--color-white);
  --button-hover-bg:   var(--color-white);
  --button-hover-text: var(--color-black);
  --button-filled-bg:  var(--color-white);
  --button-filled-text: var(--color-black);
  --button-filled-hover-bg: var(--color-cream);

  /* Hero masking blend mode */
  --hero-blend-mode:   darken;

  /* Pixel Effect palette — used only by .pixel-chars */
  --pixel-face:    #ffff5d;   /* yellow: the visible text layer  */
  --pixel-rim:     #ff4050;   /* red: the nudged-left rim layer  */
  --pixel-outline: #602fd9;   /* purple: the stroked base layer  */
}

[data-theme="light"] {
  --color-black:       #ffffff;
  --color-cream:       #0a0a0a;
  --color-white:       #0a0a0a;
  --color-gray-900:    #eeeeee;
  --color-gray-700:    #dddddd;
  --color-gray-500:    #aaaaaa;
  --color-gray-300:    #666666;
  --color-gray-100:    #333333;

  --border-divider:    rgba(10,10,10,0.18);
  --button-border:     var(--color-white);
  --button-text:       var(--color-white);
  --button-hover-bg:   var(--color-white);
  --button-hover-text: var(--color-black);
  --button-filled-bg:  var(--color-white);
  --button-filled-text: var(--color-black);
  --button-filled-hover-bg: var(--color-gray-100);

  --hero-blend-mode:   lighten;
}

/* Temporary local-testing palettes. Remove when the final palette is chosen. */
[data-theme="paper"] {
  --color-black:       #f6f0e4;
  --color-cream:       #1a1712;
  --color-white:       #1a1712;
  --color-gray-900:    #eee4d4;
  --color-gray-700:    #dccbb5;
  --color-gray-500:    #9a876f;
  --color-gray-300:    #6b5d4c;
  --color-gray-100:    #332a22;

  --border-divider:    rgba(26,23,18,0.22);
  --button-border:     var(--color-white);
  --button-text:       var(--color-white);
  --button-hover-bg:   var(--color-white);
  --button-hover-text: var(--color-black);
  --button-filled-bg:  var(--color-white);
  --button-filled-text: var(--color-black);
  --button-filled-hover-bg: #6b5d4c;

  --hero-blend-mode:   lighten;
}

[data-theme="terminal"] {
  --color-black:       #04120b;
  --color-cream:       #d7ffe7;
  --color-white:       #7dff9b;
  --color-gray-900:    #082014;
  --color-gray-700:    #12331f;
  --color-gray-500:    #3c7350;
  --color-gray-300:    #8cc99e;
  --color-gray-100:    #c7f7d3;

  --border-divider:    rgba(125,255,155,0.26);
  --button-border:     var(--color-white);
  --button-text:       var(--color-white);
  --button-hover-bg:   var(--color-white);
  --button-hover-text: var(--color-black);
  --button-filled-bg:  var(--color-white);
  --button-filled-text: var(--color-black);
  --button-filled-hover-bg: #d7ffe7;

  --hero-blend-mode:   darken;
}

[data-theme="blueprint"] {
  --color-black:       #071a2f;
  --color-cream:       #f4d35e;
  --color-white:       #d7efff;
  --color-gray-900:    #0d2744;
  --color-gray-700:    #173a60;
  --color-gray-500:    #5d86ad;
  --color-gray-300:    #a8cae8;
  --color-gray-100:    #e8f6ff;

  --border-divider:    rgba(215,239,255,0.24);
  --button-border:     var(--color-white);
  --button-text:       var(--color-white);
  --button-hover-bg:   var(--color-white);
  --button-hover-text: var(--color-black);
  --button-filled-bg:  var(--color-white);
  --button-filled-text: var(--color-black);
  --button-filled-hover-bg: var(--color-cream);

  --hero-blend-mode:   darken;
}

[data-theme="oxide"] {
  --color-black:       #21110f;
  --color-cream:       #ffe1b5;
  --color-white:       #ff9f6e;
  --color-gray-900:    #321a17;
  --color-gray-700:    #512821;
  --color-gray-500:    #9d604c;
  --color-gray-300:    #e0a58b;
  --color-gray-100:    #ffe7d6;

  --border-divider:    rgba(255,159,110,0.25);
  --button-border:     var(--color-white);
  --button-text:       var(--color-white);
  --button-hover-bg:   var(--color-white);
  --button-hover-text: var(--color-black);
  --button-filled-bg:  var(--color-white);
  --button-filled-text: var(--color-black);
  --button-filled-hover-bg: var(--color-cream);

  --hero-blend-mode:   darken;
}