/* ============================================================
   @voidable/theme — Tier 2 Semantic Tokens
   Dark mode is the default. Surfaces are TRUE BLACK.
   ============================================================ */

/* ── Dark theme (default) ── */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --void-color-bg:           var(--void-black);
  --void-color-bg-secondary: var(--void-dark-1);
  --void-color-bg-elevated:  var(--void-dark-3);
  --void-color-bg-hover:     var(--void-dark-4);
  --void-color-bg-accent:    var(--void-dark-2);
  --void-color-bg-overlay:   color-mix(in srgb, var(--void-black) 70%, transparent);

  /* Text */
  --void-color-text:           var(--void-stone-100);
  --void-color-text-secondary: var(--void-stone-400);
  --void-color-text-muted:     var(--void-stone-500);
  --void-color-text-tertiary:  var(--void-stone-450);
  --void-color-text-disabled:  var(--void-stone-600);
  --void-color-text-on-accent: var(--void-black);

  /* Borders */
  --void-color-border:        color-mix(in srgb, var(--void-white) 14%, transparent);
  --void-color-border-strong: color-mix(in srgb, var(--void-white) 22%, transparent);
  --void-color-border-focus:  color-mix(in srgb, var(--void-white) 55%, transparent);

  /* Accent — monochrome */
  --void-color-accent:       var(--void-white);
  --void-color-accent-hover: var(--void-stone-200);

  /* Status — primary */
  --void-color-error:     var(--void-red-500);
  --void-color-warning:   var(--void-orange-500);
  --void-color-caution:   var(--void-amber-500);
  --void-color-success:   var(--void-green-500);
  --void-color-info:      var(--void-blue-500);
  --void-color-notice:    var(--void-purple-500);
  --void-color-highlight: var(--void-pink-500);

  /* Status — subtle (14% color-mix) */
  --void-color-error-subtle:     color-mix(in srgb, var(--void-color-error)     14%, transparent);
  --void-color-warning-subtle:   color-mix(in srgb, var(--void-color-warning)   14%, transparent);
  --void-color-caution-subtle:   color-mix(in srgb, var(--void-color-caution)   14%, transparent);
  --void-color-success-subtle:   color-mix(in srgb, var(--void-color-success)   14%, transparent);
  --void-color-info-subtle:      color-mix(in srgb, var(--void-color-info)      14%, transparent);
  --void-color-notice-subtle:    color-mix(in srgb, var(--void-color-notice)    14%, transparent);
  --void-color-highlight-subtle: color-mix(in srgb, var(--void-color-highlight) 14%, transparent);

  /* Named spacing aliases */
  --void-spacing-xs: var(--void-space-xs);
  --void-spacing-sm: var(--void-space-sm);
  --void-spacing-md: var(--void-space-md);
  --void-spacing-lg: var(--void-space-lg);
  --void-spacing-xl: var(--void-space-xl);
}

/* ── Light theme ── */
[data-theme="light"] {
  /* Surfaces — pure white base */
  --void-color-bg:           var(--void-white);
  --void-color-bg-secondary: var(--void-stone-100);
  --void-color-bg-elevated:  var(--void-white);
  --void-color-bg-hover:     var(--void-stone-200);
  --void-color-bg-accent:    var(--void-stone-100);
  --void-color-bg-overlay:   color-mix(in srgb, var(--void-black) 30%, transparent);

  /* Text */
  --void-color-text:           var(--void-stone-900);
  --void-color-text-secondary: var(--void-stone-600);
  --void-color-text-muted:     var(--void-stone-500);
  --void-color-text-tertiary:  var(--void-stone-400);
  --void-color-text-disabled:  var(--void-stone-300);
  --void-color-text-on-accent: var(--void-white);

  /* Borders */
  --void-color-border:        var(--void-stone-300);
  --void-color-border-strong: var(--void-stone-400);
  --void-color-border-focus:  var(--void-stone-600);

  /* Accent */
  --void-color-accent:       var(--void-stone-900);
  --void-color-accent-hover: var(--void-stone-950);

  /* Status — primary (-600 variants for light mode) */
  --void-color-error:     var(--void-red-600);
  --void-color-warning:   var(--void-orange-600);
  --void-color-caution:   var(--void-amber-600);
  --void-color-success:   var(--void-green-600);
  --void-color-info:      var(--void-blue-600);
  --void-color-notice:    var(--void-purple-600);
  --void-color-highlight: var(--void-pink-600);

  /* Status — subtle (8% color-mix for light backgrounds) */
  --void-color-error-subtle:     color-mix(in srgb, var(--void-color-error)     8%, transparent);
  --void-color-warning-subtle:   color-mix(in srgb, var(--void-color-warning)   8%, transparent);
  --void-color-caution-subtle:   color-mix(in srgb, var(--void-color-caution)   8%, transparent);
  --void-color-success-subtle:   color-mix(in srgb, var(--void-color-success)   8%, transparent);
  --void-color-info-subtle:      color-mix(in srgb, var(--void-color-info)      8%, transparent);
  --void-color-notice-subtle:    color-mix(in srgb, var(--void-color-notice)    8%, transparent);
  --void-color-highlight-subtle: color-mix(in srgb, var(--void-color-highlight) 8%, transparent);
}

/* ── Shape: sharp ── */
[data-shape="sharp"] {
  --void-radius-xs:   0;
  --void-radius-sm:   0;
  --void-radius-md:   0;
  --void-radius-lg:   0;
  --void-radius-xl:   0;
  --void-radius-full: 0;
}