/* ==========================================================================
   light.css — Kai-Signals light mode surface/text variables
   Applied on :root (default). Dark mode overrides are in dark.css.
   ========================================================================== */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --surface-page:     #FFFFFF;
  --surface-raised:   #F8F9FA;
  --surface-overlay:  #FFFFFF;
  --surface-sunken:   #F1F3F5;
  --surface-border:   #DEE2E6;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-tertiary:  #9CA3AF;
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--color-brand-teal-strong);
  --text-link:      var(--color-brand-teal-strong);
  --text-link-hover: var(--color-brand-teal);

  /* ── Component — button primary ─────────────────────────────────────── */
  --btn-primary-bg:      var(--color-brand-teal);
  --btn-primary-bg-hover: var(--color-brand-teal-strong);
  --btn-primary-text:    #FFFFFF;

  /* ── Component — button secondary ───────────────────────────────────── */
  --btn-secondary-bg:      transparent;
  --btn-secondary-border:  var(--color-brand-teal);
  --btn-secondary-text:    var(--color-brand-teal-strong);
  --btn-secondary-bg-hover: var(--color-brand-teal-muted);

  /* ── Component — card ────────────────────────────────────────────────── */
  --card-bg:      var(--surface-raised);
  --card-border:  var(--surface-border);
  --card-shadow:  var(--shadow-sm);

  /* ── Component — input ───────────────────────────────────────────────── */
  --input-bg:          var(--surface-page);
  --input-border:      #CED4DA;
  --input-border-focus: var(--color-brand-teal);
  --input-text:        var(--text-primary);
  --input-placeholder: var(--text-tertiary);

  /* ── Component — navbar ──────────────────────────────────────────────── */
  --nav-bg:        var(--surface-page);
  --nav-border:    var(--surface-border);
  --nav-text:      var(--text-primary);
  --nav-text-muted: var(--text-secondary);

  /* ── Component — badge ───────────────────────────────────────────────── */
  --badge-brand-bg:   var(--color-brand-teal-muted);
  --badge-brand-text: var(--color-brand-teal-strong);
}

:root[data-theme="light"] {
  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --surface-page:     #FFFFFF;
  --surface-raised:   #F8F9FA;
  --surface-overlay:  #FFFFFF;
  --surface-sunken:   #F1F3F5;
  --surface-border:   #DEE2E6;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-tertiary:  #9CA3AF;
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--color-brand-teal-strong);
  --text-link:      var(--color-brand-teal-strong);
  --text-link-hover: var(--color-brand-teal);

  /* ── Component — button primary ─────────────────────────────────────── */
  --btn-primary-bg:      var(--color-brand-teal);
  --btn-primary-bg-hover: var(--color-brand-teal-strong);
  --btn-primary-text:    #FFFFFF;

  /* ── Component — button secondary ───────────────────────────────────── */
  --btn-secondary-bg:      transparent;
  --btn-secondary-border:  var(--color-brand-teal);
  --btn-secondary-text:    var(--color-brand-teal-strong);
  --btn-secondary-bg-hover: var(--color-brand-teal-muted);

  /* ── Component — card ────────────────────────────────────────────────── */
  --card-bg:      var(--surface-raised);
  --card-border:  var(--surface-border);
  --card-shadow:  var(--shadow-sm);

  /* ── Component — input ───────────────────────────────────────────────── */
  --input-bg:          var(--surface-page);
  --input-border:      #CED4DA;
  --input-border-focus: var(--color-brand-teal);
  --input-text:        var(--text-primary);
  --input-placeholder: var(--text-tertiary);

  /* ── Component — navbar ──────────────────────────────────────────────── */
  --nav-bg:        var(--surface-page);
  --nav-border:    var(--surface-border);
  --nav-text:      var(--text-primary);
  --nav-text-muted: var(--text-secondary);

  /* ── Component — badge ───────────────────────────────────────────────── */
  --badge-brand-bg:   var(--color-brand-teal-muted);
  --badge-brand-text: var(--color-brand-teal-strong);
}