/*
 * TokenPilot semantic button components.
 *
 * This component layer is intentionally not loaded globally yet.
 * It depends on static/css/tokens.css from the token foundation PR and
 * will be enabled later through a controlled single-page cascade pilot.
 */

.btn,
.mini-btn,
.tg-btn,
.coin-action-btn,
.direction-btn,
.trade-suggestion-btn,
.trading-tab-btn,
.cron-preset-btn,
.control-save-btn{
  --button-text:var(--text-primary);
  --button-border:var(--border-subtle);
  --button-surface:var(--surface-card-muted);
  --button-shadow:none;
  --button-hover-border:var(--accent-primary-ring);
  --button-hover-surface:color-mix(in srgb, var(--surface-card-muted) 86%, var(--accent-primary-soft) 14%);
  --button-focus-ring:var(--accent-primary-ring);
  color:var(--button-text);
  border-color:var(--button-border);
  background:var(--button-surface);
  box-shadow:var(--button-shadow);
}

.btn.primary,
.mini-btn.primary,
.control-save-btn,
.direction-btn.is-active,
.cron-preset-btn.active{
  --button-text:var(--text-inverse);
  --button-border:var(--accent-primary-strong);
  --button-surface:linear-gradient(180deg, var(--accent-primary), var(--accent-primary-strong));
  --button-shadow:var(--shadow-control, none);
}

.btn.ghost,
.mini-btn.ghost{
  --button-text:var(--text-secondary);
  --button-border:var(--border-subtle);
  --button-surface:color-mix(in srgb, var(--surface-card-muted) 72%, transparent);
}

.btn:hover,
.mini-btn:hover,
.tg-btn:hover,
.coin-action-btn:hover,
.direction-btn:hover,
.trade-suggestion-btn:hover,
.trading-tab-btn:hover,
.cron-preset-btn:hover,
.control-save-btn:hover{
  border-color:var(--button-hover-border);
  background:var(--button-hover-surface);
}

.btn:focus-visible,
.mini-btn:focus-visible,
.tg-btn:focus-visible,
.coin-action-btn:focus-visible,
.direction-btn:focus-visible,
.trade-suggestion-btn:focus-visible,
.trading-tab-btn:focus-visible,
.cron-preset-btn:focus-visible,
.control-save-btn:focus-visible{
  outline:2px solid var(--button-focus-ring);
  outline-offset:2px;
}

.btn:disabled,
.mini-btn:disabled,
.tg-btn:disabled,
.coin-action-btn:disabled,
.direction-btn:disabled,
.trade-suggestion-btn:disabled,
.trading-tab-btn:disabled,
.cron-preset-btn:disabled,
.control-save-btn:disabled,
.btn.is-disabled,
.mini-btn.is-disabled,
.tg-btn.is-disabled,
.coin-action-btn.is-disabled,
.direction-btn.is-disabled,
.trade-suggestion-btn.is-disabled,
.trading-tab-btn.is-disabled,
.cron-preset-btn.is-disabled,
.control-save-btn.is-disabled{
  --button-text:var(--text-tertiary);
  --button-border:var(--border-muted);
  --button-surface:var(--surface-card-muted);
  --button-shadow:none;
  cursor:not-allowed;
  opacity:.72;
}

.btn:not(.icon-command)::after{
  --button-icon-highlight-strong:color-mix(in srgb, var(--surface-card) 92%, white 8%);
  --button-icon-highlight:color-mix(in srgb, var(--surface-card) 82%, transparent 18%);
  --button-icon-highlight-soft:color-mix(in srgb, var(--surface-card) 72%, transparent 28%);
  --button-icon-line:color-mix(in srgb, var(--surface-card) 38%, transparent 62%);
  --button-icon-line-soft:color-mix(in srgb, var(--surface-card) 30%, transparent 70%);
  --button-icon-surface:linear-gradient(135deg, color-mix(in srgb, var(--btn-node, var(--accent-primary)) 86%, white 8%), color-mix(in srgb, var(--btn-node-2, var(--accent-info)) 58%, var(--surface-page) 20%));
  --button-icon-shadow:var(--shadow-control, 0 8px 16px color-mix(in srgb, var(--surface-page) 20%, transparent 80%));
  background:
    radial-gradient(circle at 29% 30%, var(--button-icon-highlight-strong) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 72% 31%, var(--button-icon-highlight) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 50% 71%, var(--button-icon-highlight-soft) 0 1.5px, transparent 2px),
    linear-gradient(29deg, transparent 42%, var(--button-icon-line) 43% 47%, transparent 48%),
    linear-gradient(149deg, transparent 42%, var(--button-icon-line-soft) 43% 47%, transparent 48%),
    var(--button-icon-surface);
  box-shadow:var(--button-icon-shadow);
}

.btn.ghost{
  --btn-ghost-shadow:var(--shadow-inset-soft, none);
}

.mini-btn.danger,
.btn.danger{
  --button-text:var(--state-danger);
  --button-border:var(--state-danger-ring);
  --button-surface:var(--state-danger-soft);
  --button-hover-border:var(--state-danger-ring);
  --button-focus-ring:var(--state-danger-ring);
}

.mini-btn.warn,
.btn.warn{
  --button-text:var(--state-warning);
  --button-border:var(--state-warning-ring);
  --button-surface:var(--state-warning-soft);
  --button-hover-border:var(--state-warning-ring);
  --button-focus-ring:var(--state-warning-ring);
}

/* Asset/watchlist control token layer. */

.asset-section-btn,
.sort-btn{
  color:var(--text-primary);
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.asset-section-btn:hover,
.sort-btn:hover{
  border-color:var(--accent-primary-ring);
  background:color-mix(in srgb, var(--surface-card-muted) 86%, var(--accent-primary-soft) 14%);
}

.asset-section-btn.active,
.sort-btn.active{
  color:var(--text-inverse);
  border-color:var(--accent-primary-ring);
  background:var(--accent-primary-soft);
  box-shadow:var(--shadow-control-active-ring, 0 0 0 1px var(--accent-primary-soft) inset);
}

.asset-section-btn::before,
.sort-btn::before{
  --button-icon-highlight-strong:color-mix(in srgb, var(--surface-card) 92%, white 8%);
  --button-icon-highlight:color-mix(in srgb, var(--surface-card) 76%, transparent 24%);
  --button-icon-highlight-soft:color-mix(in srgb, var(--surface-card) 72%, transparent 28%);
  --button-icon-line:color-mix(in srgb, var(--surface-card) 32%, transparent 68%);
  --button-icon-line-soft:color-mix(in srgb, var(--surface-card) 28%, transparent 72%);
  --button-icon-surface:linear-gradient(135deg, var(--state-success-soft), var(--accent-primary-soft));
  --button-icon-shadow:var(--shadow-control, 0 6px 14px color-mix(in srgb, var(--accent-primary) 14%, transparent 86%));
  background:
    radial-gradient(circle at 30% 31%, var(--button-icon-highlight-strong) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 70% 32%, var(--button-icon-highlight) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 70%, var(--button-icon-highlight-soft) 0 1.2px, transparent 1.7px),
    linear-gradient(31deg, transparent 42%, var(--button-icon-line) 43% 48%, transparent 49%),
    linear-gradient(149deg, transparent 42%, var(--button-icon-line-soft) 43% 48%, transparent 49%),
    var(--button-icon-surface);
  box-shadow:var(--button-icon-shadow);
}

.asset-section-btn:hover::before,
.asset-section-btn.active::before,
.sort-btn:hover::before,
.sort-btn.active::before{
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--state-success) 28%, transparent));
}

/* Watchlist action button token layer. */

.remove-btn,
.coin-action-btn{
  color:var(--text-secondary);
  background:transparent;
}

.remove-btn{
  color:var(--state-danger);
}

.coin-action-btn:hover{
  color:var(--text-primary);
}

.remove-btn:hover{
  color:var(--state-danger);
}

/* Radar tab button token layer. */

.tab-btn{
  color:var(--text-primary);
  border-color:var(--border-subtle);
  background:linear-gradient(180deg, var(--surface-card), var(--surface-card-muted));
  box-shadow:var(--shadow-control, var(--shadow-inset-soft, none));
}

.tab-btn:hover{
  color:var(--text-primary);
  border-color:var(--accent-primary-ring);
  background:linear-gradient(180deg, var(--surface-card-muted), var(--surface-card));
  box-shadow:var(--shadow-floating);
}

.tab-btn.active{
  color:var(--text-primary);
  border-color:var(--accent-primary-ring);
  background:linear-gradient(180deg, var(--accent-primary-soft), var(--surface-card-muted));
  box-shadow:var(--shadow-tab-active, 0 0 0 1px var(--accent-primary-ring) inset, var(--shadow-control, none));
}

.tab-btn::before{
  --button-icon-surface:linear-gradient(135deg, var(--state-warning-soft), var(--accent-primary-soft));
  --button-icon-shadow:var(--shadow-control, 0 6px 14px color-mix(in srgb, var(--accent-primary) 14%, transparent 86%));
  background:
    radial-gradient(circle at 30% 31%, color-mix(in srgb, var(--text-primary) 38%, transparent) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 70% 32%, color-mix(in srgb, var(--text-primary) 30%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--text-primary) 28%, transparent) 0 1.2px, transparent 1.7px),
    linear-gradient(31deg, transparent 42%, color-mix(in srgb, var(--text-primary) 22%, transparent) 43% 48%, transparent 49%),
    linear-gradient(149deg, transparent 42%, color-mix(in srgb, var(--text-primary) 18%, transparent) 43% 48%, transparent 49%),
    var(--button-icon-surface);
  box-shadow:var(--button-icon-shadow);
}

.tab-btn:hover::before,
.tab-btn.active::before{
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--state-warning) 28%, transparent));
}

.tab-btn[data-tab="market"]{
  border-color:var(--accent-primary-ring);
  color:var(--text-primary);
  background:linear-gradient(180deg, var(--accent-primary-soft), var(--surface-card-muted));
}

.tab-btn[data-tab="flow"],
.tab-btn[data-tab="fib"]{
  border-color:var(--accent-violet-ring, var(--accent-primary-ring));
  color:var(--text-primary);
  background:linear-gradient(180deg, var(--accent-violet-soft, var(--accent-primary-soft)), var(--surface-card-muted));
}

.tab-btn[data-tab="elliott"],
.tab-btn[data-tab="trading_setup"]{
  border-color:var(--state-warning-ring);
  color:var(--text-primary);
  background:linear-gradient(180deg, var(--state-warning-soft), var(--surface-card-muted));
}

.tab-btn[data-tab="spot_setup"]{
  border-color:var(--state-success-ring);
  color:var(--text-primary);
  background:linear-gradient(180deg, var(--state-success-soft), var(--surface-card-muted));
}

.tab-btn[data-tab="market"].active{
  border-color:var(--accent-primary-ring);
  background:linear-gradient(180deg, var(--accent-primary-soft), var(--surface-card));
}

.tab-btn[data-tab="flow"].active,
.tab-btn[data-tab="fib"].active{
  border-color:var(--accent-violet-ring, var(--accent-primary-ring));
  background:linear-gradient(180deg, var(--accent-violet-soft, var(--accent-primary-soft)), var(--surface-card));
}

.tab-btn[data-tab="elliott"].active,
.tab-btn[data-tab="trading_setup"].active{
  border-color:var(--state-warning-ring);
  background:linear-gradient(180deg, var(--state-warning-soft), var(--surface-card));
}

.tab-btn[data-tab="spot_setup"].active{
  border-color:var(--state-success-ring);
  background:linear-gradient(180deg, var(--state-success-soft), var(--surface-card));
}

/* Tab shell token layer. */

body[data-page="radar"] .tabs{
  border-color:var(--accent-info-ring, var(--accent-primary-ring));
  background:linear-gradient(135deg, var(--accent-info-soft), var(--accent-primary-soft) 52%, var(--state-warning-soft));
  box-shadow:var(--shadow-panel);
}