/* SUPERFID shared action/accent tokens — Tony decision, 2026-09-24 KST.
   Primary filled actions are black. Blue is reserved for small accents and state. */
:root {
  --sf-accent: #275AFF;
  --sf-accent-rgb: 39 90 255;
  --sf-accent-subtle: #EEF2FF;
  --sf-action: #000000;
  --sf-action-hover: #262626;
  --sf-action-pressed: #171717;
  --sf-action-disabled: #E5E5E5;
  --sf-on-action: #FFFFFF;
  --sf-on-action-disabled: #737373;
  --sf-focus-ring: #525252; /* keyboard focus: neutral, separated by a 2px gap */
  /* Vivid semantic palette — 2026-09-25 KST; complements brand blue #275AFF.
     Dark text, vivid small accent, subtle surface and border.
     Use the text token for labels; accents are reserved for non-text details. */
  --sf-warning: #C2410C;
  --sf-warning-accent: #F05A16;
  --sf-warning-bg: #FFF4EB;
  --sf-warning-border: #FED0AE;
  --sf-danger: #C92A3A;
  --sf-danger-accent: #EF4444;
  --sf-danger-bg: #FFF1F2;
  --sf-danger-border: #FFC9CE;
  --sf-positive: #137A4A;
  --sf-positive-accent: #00A36C;
  --sf-positive-bg: #ECFDF3;
  --sf-positive-border: #B9EACD;
}

.sf-primary {
  background: var(--sf-action);
  color: var(--sf-on-action);
  transition: background-color .12s ease, color .12s ease;
}
.sf-primary:hover { background: var(--sf-action-hover); }
.sf-primary:active { background: var(--sf-action-pressed); }
.sf-primary:focus-visible {
  outline: 1px solid var(--sf-focus-ring);
  outline-offset: 2px;
}
.sf-primary:is(:disabled, [aria-disabled="true"], .disabled) {
  background: var(--sf-action-disabled);
  color: var(--sf-on-action-disabled);
  opacity: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sf-primary { transition: none; }
}