/* ── Fontglass Design System: Semantic Color Variables ── */
/* Requires: tokens.css (slate palette, accent-a/b)       */

:root {
  /* Core */
  --color-bg:             var(--slate-950);
  --color-bg-secondary:   var(--slate-900);
  --color-fg:             var(--slate-50);
  --color-fg-secondary:   var(--slate-400);
  --color-fg-muted:       var(--slate-500);
  --color-fg-subtle:      var(--slate-700);  /* placeholder / very dim */

  /* Borders */
  --color-border:         var(--slate-800);
  --color-border-strong:  var(--slate-700);

  /* Surfaces */
  --color-surface:        var(--slate-900);
  --color-surface-hover:  var(--slate-800);
  --color-surface-active: var(--slate-700);

  /* Accents */
  --color-accent-en:      var(--color-accent-a);
  --color-accent-jp:      var(--color-accent-b);

  /* Interactive */
  --color-input-bg:       var(--slate-900);
  --color-range-track:    var(--slate-700);
  --color-scrollbar:      var(--slate-700);
}

[data-theme="light"] {
  --color-bg:             var(--slate-50);
  --color-bg-secondary:   var(--slate-100);
  --color-fg:             var(--slate-900);
  --color-fg-secondary:   var(--slate-500);
  --color-fg-muted:       var(--slate-400);
  --color-fg-subtle:      var(--slate-300);

  --color-border:         var(--slate-200);
  --color-border-strong:  var(--slate-300);

  --color-surface:        var(--slate-100);
  --color-surface-hover:  var(--slate-200);
  --color-surface-active: var(--slate-300);

  /* Accents darken in light mode for readability */
  --color-accent-en:      #4a70a8;
  --color-accent-jp:      #a84848;

  --color-input-bg:       #ffffff;
  --color-range-track:    var(--slate-300);
  --color-scrollbar:      var(--slate-300);
}