/* ClubFlow Appearance System
   Centralized token bridge for the plain DOM/Electron runtime. Keep new
   appearance decisions here instead of adding module-level color patches. */

:root {
  color-scheme: light;
}

:root[data-appearance-mode="dark"] {
  color-scheme: dark;
}

html[data-appearance-mode] {
  font-size: var(--cf-base-font-size, 92%);
}

body[data-appearance-preset] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cf-bg-app) 90%, #000 10%) 0%, var(--cf-bg-app) 100%);
  color: var(--cf-text-primary);
}

body[data-appearance-mode="light"] {
  background: linear-gradient(180deg, #ffffff 0%, var(--cf-bg-app) 100%);
}

body[data-appearance-preset] .login-card,
body[data-appearance-preset] .panel,
body[data-appearance-preset] .backup-card,
body[data-appearance-preset] .status-card,
body[data-appearance-preset] .stat-card,
body[data-appearance-preset] .data-grid-card,
body[data-appearance-preset] .list-item,
body[data-appearance-preset] .today-actions-card,
body[data-appearance-preset] .quick-message-card,
body[data-appearance-preset] .summary-chip,
body[data-appearance-preset] .insight-card,
body[data-appearance-preset] .appearance-preview {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
  box-shadow: var(--cf-shadow-soft);
}

body[data-appearance-preset] .login-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cf-surface-strong) 98%, var(--cf-highlight)) 0%, var(--cf-surface) 100%);
}

body[data-appearance-preset] .muted,
body[data-appearance-preset] .field-label,
body[data-appearance-preset] .panel-status,
body[data-appearance-preset] .panel-header p,
body[data-appearance-preset] .backup-card p,
body[data-appearance-preset] .hero p,
body[data-appearance-preset] .list-item p,
body[data-appearance-preset] .list-item small,
body[data-appearance-preset] .data-grid td p,
body[data-appearance-preset] .data-grid td small,
body[data-appearance-preset] .sidebar-copy,
body[data-appearance-preset] .brand-contact,
body[data-appearance-preset] small {
  color: var(--cf-text-muted) !important;
}

body[data-appearance-preset] input,
body[data-appearance-preset] select,
body[data-appearance-preset] textarea {
  min-height: var(--cf-control-height);
  background: color-mix(in srgb, var(--cf-surface-soft) 92%, #000 8%);
  color: var(--cf-text-primary) !important;
  -webkit-text-fill-color: var(--cf-text-primary);
  border-color: var(--cf-border) !important;
}

body[data-appearance-mode="light"] input,
body[data-appearance-mode="light"] select,
body[data-appearance-mode="light"] textarea {
  background: color-mix(in srgb, var(--cf-surface-soft) 94%, #fff 6%);
}

body[data-appearance-preset] input::placeholder,
body[data-appearance-preset] textarea::placeholder {
  color: color-mix(in srgb, var(--cf-text-muted) 78%, transparent) !important;
  opacity: 1;
}

body[data-appearance-preset] .secondary,
body[data-appearance-preset] .upload-label,
body[data-appearance-preset] .page-tab,
body[data-appearance-preset] .subtab,
body[data-appearance-preset] .action-btn {
  background: color-mix(in srgb, var(--cf-surface-soft) 86%, transparent);
  border-color: var(--cf-border);
  color: var(--cf-text-primary) !important;
}

body[data-appearance-preset] .primary,
body[data-appearance-preset] .toggle-group .secondary.active {
  background: linear-gradient(180deg, var(--cf-accent), var(--cf-accent-strong));
  border-color: color-mix(in srgb, var(--cf-accent) 72%, transparent);
  color: #ffffff !important;
}

body[data-appearance-preset] .danger-btn {
  border-color: color-mix(in srgb, var(--cf-danger) 38%, var(--cf-border));
  color: var(--cf-danger) !important;
}

body[data-appearance-preset] .horizontal-nav,
body[data-appearance-preset] .toolbar,
body[data-appearance-preset] .subtabs {
  background: color-mix(in srgb, var(--cf-surface) 92%, transparent);
  border-color: var(--cf-border);
}

body[data-appearance-preset] .page-tab.active,
body[data-appearance-preset] .subtab.active {
  background: color-mix(in srgb, var(--cf-accent) 18%, var(--cf-surface-strong));
  border-color: color-mix(in srgb, var(--cf-accent) 42%, var(--cf-border));
  color: var(--cf-text-primary) !important;
}

body[data-appearance-preset] .sidebar {
  background: color-mix(in srgb, var(--cf-surface-strong) 88%, #000 12%);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
}

body[data-appearance-mode="light"] .sidebar {
  background: #fffdf8;
}

body[data-appearance-preset] .badge,
body[data-appearance-preset] .pill,
body[data-appearance-preset] .eyebrow,
body[data-appearance-preset] .multi-select-chip,
body[data-appearance-preset] .qr-pill {
  background: color-mix(in srgb, var(--cf-accent) 12%, var(--cf-surface-soft));
  border-color: color-mix(in srgb, var(--cf-accent) 32%, var(--cf-border));
  color: var(--cf-text-primary) !important;
}

body[data-appearance-preset] .data-grid,
body[data-appearance-preset] table {
  color: var(--cf-text-primary);
}

body[data-appearance-preset] .data-grid th,
body[data-appearance-preset] table thead th {
  background: color-mix(in srgb, var(--cf-surface-strong) 92%, var(--cf-accent) 8%);
  color: var(--cf-text-primary);
  border-color: var(--cf-border);
}

body[data-appearance-preset] .data-grid td,
body[data-appearance-preset] table td {
  border-color: var(--cf-border);
}

body[data-appearance-preset] .data-grid-row.is-odd td,
body[data-appearance-preset] table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--cf-surface-soft) 55%, transparent);
}

body[data-appearance-preset] .data-grid tbody tr:hover td,
body[data-appearance-preset] table tbody tr:hover {
  background: color-mix(in srgb, var(--cf-accent) 10%, var(--cf-surface-soft));
}

body[data-appearance-preset] .checkbox-inline {
  background: color-mix(in srgb, var(--cf-surface-soft) 76%, transparent);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
}

body[data-appearance-preset] input[type="checkbox"] {
  accent-color: var(--cf-accent);
}

body[data-appearance-preset] dialog,
body[data-appearance-preset] .modal,
body[data-appearance-preset] .dialog,
body[data-appearance-preset] .confirm-dialog {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
  box-shadow: var(--cf-shadow-panel);
}

body[data-appearance-preset] .activation-status-card {
  background: color-mix(in srgb, var(--cf-surface-strong) 94%, var(--cf-highlight));
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
}

body[data-appearance-mode="dark"] .login-card .activation-status-card {
  background: color-mix(in srgb, var(--cf-surface-soft) 92%, #fff 8%);
  color: var(--cf-text-primary);
}

body[data-appearance-mode="dark"] .login-card .activation-status-card strong,
body[data-appearance-mode="dark"] .login-card .activation-status-card p {
  color: var(--cf-text-primary) !important;
}

body[data-appearance-preset] .login-card input,
body[data-appearance-preset] .login-card select,
body[data-appearance-preset] .login-card textarea {
  background: color-mix(in srgb, var(--cf-surface-soft) 88%, #000 12%);
}

body[data-appearance-mode="light"] .login-card input,
body[data-appearance-mode="light"] .login-card select,
body[data-appearance-mode="light"] .login-card textarea {
  background: #fffdf8;
}

.appearance-settings-form {
  align-items: stretch;
}

.appearance-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--cf-space-3);
  padding: var(--cf-space-4);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
}

.appearance-preview p,
.appearance-preview strong {
  margin: 0;
}
/* Dashboard Appearance System bridge
   Dashboard layout remains in style.css; all colors and surfaces come from
   Settings > Appearance System through the centralized --cf-* token set. */

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell {
  --premium-bg: var(--cf-bg-app);
  --premium-bg-soft: var(--cf-surface-soft);
  --premium-surface: var(--cf-surface);
  --premium-surface-raised: var(--cf-surface-strong);
  --premium-surface-glass: color-mix(in srgb, var(--cf-surface) 82%, transparent);
  --premium-border: var(--cf-border);
  --premium-border-strong: color-mix(in srgb, var(--cf-accent) 38%, var(--cf-border));
  --premium-blue: var(--cf-accent);
  --premium-blue-strong: var(--cf-accent-strong);
  --premium-emerald: var(--cf-success);
  --premium-amber: var(--cf-warning);
  --premium-red: var(--cf-danger);
  --premium-text: var(--cf-text-primary);
  --premium-text-soft: var(--cf-text-primary);
  --premium-text-muted: var(--cf-text-muted);
  --premium-shadow-soft: var(--cf-shadow-soft);
  --premium-shadow-raised: var(--cf-shadow-panel);
  --dashboard-text: var(--cf-text-primary);
  --dashboard-muted: var(--cf-text-muted);

  background: color-mix(in srgb, var(--cf-bg-app) 94%, var(--cf-surface-soft));
  color: var(--cf-text-primary);
  border-color: var(--cf-border);
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell::before {
  border-color: color-mix(in srgb, var(--cf-accent) 24%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--cf-accent) 12%, transparent),
      color-mix(in srgb, var(--cf-success) 8%, transparent)
    );
  opacity: 0.55;
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell::after {
  border-color: color-mix(in srgb, var(--cf-warning) 24%, transparent);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cf-warning) 13%, transparent),
    transparent 68%
  );
  opacity: 0.55;
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell > .hero,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .panel,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .stat-card,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .dashboard-branding-tip,
body[data-appearance-preset] #page-dashboard .dashboard-activity-card {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
  box-shadow: var(--cf-shadow-soft);
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .dashboard-kpi--primary {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--cf-accent) 9%, var(--cf-surface-strong)),
      var(--cf-surface)
    );
  border-color: color-mix(in srgb, var(--cf-accent) 32%, var(--cf-border));
  box-shadow: var(--cf-shadow-panel);
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .stat-card::before {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cf-accent) 16%, transparent),
    color-mix(in srgb, var(--cf-success) 11%, transparent)
  );
}

body[data-appearance-preset] #page-dashboard .dashboard-activity-card::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cf-accent) 12%, transparent),
    transparent 68%
  );
}

body[data-appearance-preset] #page-dashboard .dashboard-activity-metric {
  background: var(--cf-surface-soft);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
}

body[data-appearance-preset] #page-dashboard .dashboard-activity-metric--warning {
  background: color-mix(in srgb, var(--cf-warning) 10%, var(--cf-surface));
  border-color: color-mix(in srgb, var(--cf-warning) 35%, var(--cf-border));
}

body[data-appearance-preset] #page-dashboard .dashboard-activity-metric--danger {
  background: color-mix(in srgb, var(--cf-danger) 9%, var(--cf-surface));
  border-color: color-mix(in srgb, var(--cf-danger) 35%, var(--cf-border));
}

body[data-appearance-preset] #page-dashboard .dashboard-quick-action {
  background: var(--cf-surface-soft);
  border-color: var(--cf-border);
  color: var(--cf-text-primary);
  box-shadow: none;
}

body[data-appearance-preset] #page-dashboard .dashboard-quick-action:hover {
  background: color-mix(in srgb, var(--cf-accent) 9%, var(--cf-surface-soft));
  border-color: color-mix(in srgb, var(--cf-accent) 38%, var(--cf-border));
  box-shadow: var(--cf-shadow-soft);
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .badge,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .pill {
  background: color-mix(in srgb, var(--cf-accent) 12%, var(--cf-surface-soft));
  border-color: color-mix(in srgb, var(--cf-accent) 32%, var(--cf-border));
  color: var(--cf-text-primary);
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell canvas {
  background: var(--cf-surface-soft);
  border-color: var(--cf-border);
}

body[data-appearance-preset] #page-dashboard.dashboard-premium-shell .clickable-kpi:focus-visible,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell button:focus-visible,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell input:focus-visible,
body[data-appearance-preset] #page-dashboard.dashboard-premium-shell select:focus-visible {
  outline-color: var(--cf-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cf-accent) 18%, transparent);
}