/*
 * HDS Semantic Tokens
 * ============================================================
 * Layer 2 — UI meaning.
 *
 * Translates Foundation raw values into interface-level concepts.
 * These tokens define HOW the UI looks, not WHAT the data means.
 *
 * Dependency: foundation.css
 * Used by:    brand.css, density.css, all components
 *
 * RULE: Every component must reference Semantic tokens.
 *       Direct Foundation references in component CSS are forbidden.
 */

:root {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Surface — background hierarchy
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-surface-root:    var(--hds-neutral-50);
  --hds-surface-card:    var(--hds-neutral-0);
  --hds-surface-raised:  var(--hds-neutral-0);
  --hds-surface-hover:   var(--hds-neutral-50);
  --hds-surface-pressed: var(--hds-neutral-100);
  --hds-surface-overlay: rgba(0, 0, 0, 0.5);
  --hds-surface-backdrop:rgba(0, 0, 0, 0.5);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Border
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-border-default:  var(--hds-neutral-200);
  --hds-border-subtle:   var(--hds-neutral-100);
  --hds-border-strong:   var(--hds-neutral-300);
  --hds-border-accent:   var(--hds-brand-accent);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Text
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-text-primary:    var(--hds-neutral-900);
  --hds-text-secondary:  var(--hds-neutral-500);
  --hds-text-muted:      var(--hds-neutral-400);
  --hds-text-inverse:    var(--hds-neutral-0);
  --hds-text-link:       var(--hds-brand-accent);
  --hds-text-link-hover: var(--hds-brand-accent-hover);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Feedback — universal across all products
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-feedback-success:         #10b981;
  --hds-feedback-success-soft:    rgba(16, 185, 129, 0.12);
  --hds-feedback-success-border:  #a7f3d0;
  --hds-feedback-success-text:    #065f46;

  --hds-feedback-warning:         #f59e0b;
  --hds-feedback-warning-soft:    rgba(245, 158, 11, 0.12);
  --hds-feedback-warning-border:  #fde68a;
  --hds-feedback-warning-text:    #92400e;

	--hds-feedback-danger:          #ef4444;
	--hds-feedback-danger-hover:     #dc2626;
	--hds-feedback-danger-soft:     rgba(239, 68, 68, 0.12);
	--hds-feedback-danger-border:   #fecaca;
	--hds-feedback-danger-text:     #991b1b;

  --hds-feedback-info:            #3b82f6;
  --hds-feedback-info-soft:       rgba(59, 130, 246, 0.12);
  --hds-feedback-info-border:     #bfdbfe;
  --hds-feedback-info-text:       #1e40af;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Icon
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-icon-primary:   var(--hds-text-primary);
  --hds-icon-secondary: var(--hds-text-secondary);
  --hds-icon-muted:     var(--hds-text-muted);
  --hds-icon-accent:    var(--hds-brand-accent);
  --hds-icon-inverse:   var(--hds-text-inverse);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Component-level defaults
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-input-bg:          var(--hds-surface-card);
  --hds-input-border:      var(--hds-border-default);
  --hds-input-text:        var(--hds-text-primary);
  --hds-input-placeholder: var(--hds-text-muted);
  --hds-input-focus-ring:  var(--hds-brand-accent-soft);

  --hds-button-primary-bg:    var(--hds-brand-accent);
  --hds-button-primary-text:  var(--hds-neutral-900);
  --hds-button-secondary-bg:  transparent;
  --hds-button-secondary-text:var(--hds-text-secondary);
  --hds-button-ghost-bg:      transparent;
  --hds-button-ghost-text:    var(--hds-brand-accent);

  --hds-card-bg:         var(--hds-surface-card);
  --hds-card-border:     var(--hds-border-default);
  --hds-card-radius:     var(--hds-radius-lg);
  --hds-card-shadow:     var(--hds-shadow-md);
  --hds-card-padding:    var(--hds-space-6);

  --hds-page-header-bg:  var(--hds-neutral-900);
  --hds-page-header-text:var(--hds-neutral-0);
  --hds-page-max-width:  1100px;
  --hds-page-content-gap: var(--hds-space-7);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     State indicators
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --hds-state-active-bg:     var(--hds-brand-accent-soft);
  --hds-state-active-text:   var(--hds-brand-accent);
  --hds-state-selected-border: var(--hds-brand-accent);
  --hds-state-disabled-opacity: 0.5;
  --hds-state-loading-opacity:  0.7;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     System
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * Surface variant: Dark theme
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *
 * Activated by .hds-surface-dark on the body element.
 * Overrides surface/text/border tokens for dark backgrounds.
 * Feedback and Decision tokens remain unchanged across themes
 * (a "Certain" judgment is the same green in light or dark).
 */
.hds-surface-dark {
  --hds-surface-root:     var(--hds-neutral-950);
  --hds-surface-card:     #111113;
  --hds-surface-raised:   #18181b;
  --hds-surface-hover:    #1f1f23;
  --hds-surface-pressed:  #27272a;
  --hds-surface-overlay:  rgba(0, 0, 0, 0.6);
  --hds-surface-backdrop: rgba(0, 0, 0, 0.6);

  --hds-border-default:   #27272a;
  --hds-border-subtle:    #1f1f23;
  --hds-border-strong:    #3f3f46;

  --hds-text-primary:     #f4f4f5;
  --hds-text-secondary:   #a1a1aa;
  --hds-text-muted:       #71717a;
  --hds-text-inverse:     var(--hds-neutral-950);

  --hds-input-bg:         var(--hds-surface-card);
  --hds-input-border:     var(--hds-border-default);
  --hds-card-bg:          var(--hds-surface-card);
  --hds-card-border:      var(--hds-border-default);

  color-scheme: dark;
}

/*
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * Surface variant: Glass
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */
.hds-surface-glass {
  --hds-surface-root:     #f0f4f8;
  --hds-surface-card:     rgba(255, 255, 255, 0.72);
  --hds-surface-raised:   rgba(255, 255, 255, 0.85);
  --hds-surface-hover:    rgba(248, 250, 252, 0.6);
  --hds-surface-pressed:  rgba(241, 245, 249, 0.8);

  color-scheme: light;
}