/**
 * styles/tokens/_base.less
 *
 * Layer 1 — SP Semantic Alias Tokens
 *
 * Thin alias layer mapping to Foundry CSS tokens in one place.
 * If Foundry renames or shifts token semantics between versions,
 * only this layer needs updating.
 *
 * RULE: All Foundry --color-* / --font-* / --border-* tokens are FORBIDDEN
 * inside .scrying-pool CSS. Always use --sp-* aliases. This is the sole
 * enforcement point for the semantic layer.
 *
 * Every token includes a hardcoded fallback for environments where the
 * upstream Foundry token is absent.
 */

:root {
  /* Surface & structure */
  --sp-bg:                  var(--sp-theme-bg,            var(--color-bg,              hsl(220, 15%, 12%)));
  --sp-surface:             var(--sp-theme-surface,       var(--color-bg-option,       #141618));
  --sp-surface-raised:      var(--sp-theme-surface-raised, #1c1f22);
  --sp-surface-elevated:    var(--sp-theme-surface-elevated, var(--sp-surface-raised, #1c1f22));
  --sp-surface-subtle:      var(--sp-theme-surface-subtle, rgba(255, 255, 255, 0.05));
  --sp-surface-hover:       var(--sp-theme-surface-hover,  rgba(255, 255, 255, 0.08));
  --sp-border:              var(--sp-theme-border,        var(--color-border,          #282c30));
  --sp-border-subtle:       var(--sp-theme-border-subtle,  rgba(255, 255, 255, 0.07));

  /* Typography */
  --sp-text-primary:        var(--sp-theme-text-primary,  var(--color-text-primary,    #dde2e8));
  --sp-text-secondary:      var(--sp-theme-text-secondary,var(--color-text-secondary,  #7a8390));
  --sp-text-muted:          var(--sp-theme-text-muted,    #555d66);
  --sp-font-size-sm:        11px;

  /* Accent & interaction */
  --sp-accent:              var(--sp-theme-accent,        var(--color-warm-2,          #4a9e6b));
  --sp-accent-hover:        var(--sp-theme-accent-hover,   #3d8f5e);
  --sp-accent-active:       var(--sp-theme-accent-active,  #2d7a4f);
  --sp-accent-text:         #fff;
  --sp-surface-interactive: var(--sp-theme-interactive,   #242830);
  --sp-control-bg:          var(--sp-theme-control,       #1a1d20);

  /* Semantic colours */
  --sp-color-red:           hsl(0, 65%, 55%);
  --sp-color-red-dark:      hsl(0, 65%, 42%);
  --sp-color-red-rgb:       204, 77, 77;
  --sp-color-red-subtle:    hsla(0, 65%, 55%, 0.12);
  --sp-color-green:         hsl(140, 55%, 50%);
  --sp-color-green-subtle:  hsla(140, 55%, 50%, 0.12);
  --sp-color-yellow:        hsl(48, 88%, 55%);
  --sp-color-yellow-subtle: hsla(48, 88%, 55%, 0.12);

  /* Shape & motion */
  --sp-radius-sm:           3px;
  --sp-radius-md:           4px;

  /* Dialog surface */
  --sp-dialog-bg:           linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
  --sp-dialog-border:       1px solid rgba(255, 255, 255, 0.08);
  --sp-dialog-shadow:       0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
                            inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sp-dialog-radius:       8px;
  --sp-dialog-grip-color:   rgba(255, 255, 255, 0.07);

  /* Buttons */
  --sp-btn-font-size:       12px;
  --sp-btn-font-size-sm:    11px;
  --sp-btn-font-size-lg:    13px;
  --sp-btn-padding:         7px 14px;
  --sp-btn-padding-sm:      4px 10px;
  --sp-btn-padding-lg:      9px 18px;
  --sp-btn-radius:          5px;
  --sp-btn-gap:             6px;

  --sp-btn-primary-bg:      var(--sp-accent);
  --sp-btn-primary-text:    #fff;
  --sp-btn-primary-hover:   var(--sp-accent-hover);
  --sp-btn-primary-active:  var(--sp-accent-active);

  --sp-btn-secondary-bg:        rgba(255, 255, 255, 0.05);
  --sp-btn-secondary-text:      var(--sp-text-secondary);
  --sp-btn-secondary-border:    rgba(255, 255, 255, 0.12);
  --sp-btn-secondary-hover-bg:  rgba(255, 255, 255, 0.1);
  --sp-btn-secondary-hover-text: var(--sp-text-primary);

  --sp-btn-danger-bg:      var(--sp-color-red);
  --sp-btn-danger-text:    #fff;
  --sp-btn-danger-hover:   var(--sp-color-red-dark);

  /* Focus ring — module-wide keyboard navigation anchor */
  --sp-focus:               var(--sp-theme-focus,         var(--color-focus-outline,   #63c287));
  --sp-focus-ring:          0 0 0 2px var(--sp-focus);

  /* Badge */
  --sp-badge-bg:            rgba(0, 0, 0, 0.72);
  --sp-badge-text:          var(--sp-text-primary);

  /* Background operations = no toast ever (silent by design) */
}

/* Theme overrides — dark theme defaults */
.scrying-pool,
:root[data-color-scheme="dark"] {
  --sp-theme-bg:               hsl(220, 15%, 12%);
  --sp-theme-surface:          #141618;
  --sp-theme-surface-raised:   #1c1f22;
  --sp-theme-surface-elevated: #1c1f22;
  --sp-theme-surface-subtle:   rgba(255, 255, 255, 0.05);
  --sp-theme-surface-hover:    rgba(255, 255, 255, 0.08);
  --sp-theme-border:           #282c30;
  --sp-theme-border-subtle:    rgba(255, 255, 255, 0.07);
  --sp-theme-text-primary:     #dde2e8;
  --sp-theme-text-secondary:   #7a8390;
  --sp-theme-text-muted:       #555d66;
  --sp-theme-accent:           #4a9e6b;
  --sp-theme-accent-hover:     #3d8f5e;
  --sp-theme-accent-active:    #2d7a4f;
  --sp-theme-interactive:      #242830;
  --sp-theme-control:          #1a1d20;
  --sp-theme-focus:            #63c287;
  --sp-theme-urgency:          #c8982a;
  --sp-btn-primary-bg:         var(--sp-theme-accent, #4a9e6b);
  --sp-btn-primary-text:       #fff;
  --sp-btn-primary-hover:      var(--sp-theme-accent-hover, #3d8f5e);
  --sp-btn-primary-active:     var(--sp-theme-accent-active, #2d7a4f);
}
