/*
 * Theme variables – semantic layer
 *
 * Maps semantic names to primitive tokens defined in tokens.css.
 * The default theme is light. Override semantic variables in
 * [data-theme="dark"] to activate a dark theme (Sprint 4).
 *
 * Usage:
 *   Use these semantic variables (--color-*, --shadow-*) in all
 *   component and feature styles rather than raw token values.
 */

/* Default (light) theme */
:root,
:root[data-theme="light"] {
    /* ── Backgrounds ──────────────────────────────────────── */

    --color-bg:           var(--gray-50);
    --color-surface:      var(--white);
    --color-surface-alt:  var(--gray-100);
    --color-surface-hero: var(--blue-100);
    --color-surface-bar:  var(--gray-200);

    /* ── Text ─────────────────────────────────────────────── */

    --color-text:            var(--gray-900);
    --color-text-heading:    var(--gray-950);
    --color-text-muted:      var(--gray-800);
    --color-text-secondary:  var(--gray-850);
    --color-text-on-primary: var(--white);

    /* ── Borders ──────────────────────────────────────────── */

    --color-border:        var(--gray-400);
    --color-border-subtle: var(--gray-300);
    --color-border-hero:   var(--blue-200);

    /* ── Interactive ──────────────────────────────────────── */

    --color-primary:       var(--blue-600);
    --color-primary-hover: var(--blue-700);
    --color-primary-light: var(--blue-50);
    --color-link:          var(--blue-700);
    --color-focus:         var(--blue-600);

    /* ── Feedback ─────────────────────────────────────────── */

    --color-error-bg:     var(--red-50);
    --color-error-border: var(--gray-300);

    /* ── Shadows ──────────────────────────────────────────── */

    --shadow-surface: var(--shadow-card);
}

/* Dark theme */
:root[data-theme="dark"] {
    /* ── Backgrounds ──────────────────────────────────────── */

    --color-bg:           var(--gray-950);
    --color-surface:      var(--gray-900);
    --color-surface-alt:  var(--gray-850);
    --color-surface-hero: var(--blue-950);
    --color-surface-bar:  var(--gray-800);

    /* ── Text ─────────────────────────────────────────────── */

    --color-text:            var(--gray-100);
    --color-text-heading:    var(--white);
    --color-text-muted:      var(--gray-300);
    --color-text-secondary:  var(--gray-200);
    --color-text-on-primary: var(--white);

    /* ── Borders ──────────────────────────────────────────── */

    --color-border:        var(--gray-600);
    --color-border-subtle: var(--gray-700);
    --color-border-hero:   var(--blue-800);

    /* ── Interactive ──────────────────────────────────────── */

    --color-primary:       var(--blue-400);
    --color-primary-hover: var(--blue-300);
    --color-primary-light: var(--blue-900);
    --color-link:          var(--blue-400);
    --color-focus:         var(--blue-400);

    /* ── Feedback ─────────────────────────────────────────── */

    --color-error-bg:     var(--red-950);
    --color-error-border: var(--gray-600);

    /* ── Shadows ──────────────────────────────────────────── */

    --shadow-surface: var(--shadow-card);
}