/* ============================================================
   LUMARKEN — colors.css
   Semantic colour roles. Components consume these, not tokens.
   ============================================================ */

:root {
  /* Surfaces */
  --color-bg:            var(--raw-mist-100);
  --color-bg-raised:     var(--raw-mist-50);
  --color-surface:       var(--raw-cream-100);   /* cards & buttons */
  --color-surface-deep:  var(--raw-cream-200);
  --color-surface-edge:  var(--raw-cream-300);
  --color-band:          var(--raw-teal-700);    /* header, footer, dark bands */
  --color-band-deep:     var(--raw-teal-800);

  /* Ink */
  --color-ink:           var(--raw-teal-900);
  --color-ink-soft:      rgba(0, 43, 53, 0.72);
  --color-ink-faint:     rgba(0, 43, 53, 0.52);
  --color-ink-inverse:   var(--raw-cream-100);
  --color-ink-inverse-soft: rgba(245, 245, 240, 0.72);

  /* Accent */
  --color-accent:        var(--raw-ember-600);
  --color-accent-soft:   var(--raw-ember-500);
  --color-link:          var(--raw-teal-700);

  /* Lines & focus */
  --color-line:          var(--raw-ink-a12);
  --color-line-strong:   var(--raw-ink-a24);
  --color-line-inverse:  rgba(245, 245, 240, 0.18);
  --color-focus:         var(--raw-teal-600);

  /* Shadows — buttons use shadow, never border */
  --shadow-btn:
    0 1px 2px var(--raw-ink-a16),
    0 6px 16px -4px var(--raw-ink-a24);
  --shadow-btn-hover:
    0 2px 4px var(--raw-ink-a16),
    0 12px 28px -6px rgba(0, 43, 53, 0.34);
  --shadow-btn-active:
    0 1px 2px var(--raw-ink-a16);
  --shadow-card:
    0 1px 2px var(--raw-ink-a04),
    0 12px 32px -8px var(--raw-ink-a12);
  --shadow-card-hover:
    0 2px 4px var(--raw-ink-a08),
    0 24px 48px -12px var(--raw-ink-a24);
  --shadow-label:
    0 10px 30px -6px rgba(0, 27, 33, 0.45);
}