/* SINKAYO UI/UX Design Token Foundation
   Version: v3.28.18
   Purpose: central visual variables for the future SINKAYO OS redesign.
   This file intentionally does not change layout structure. It modernizes the shared visual language through tokens.
*/

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Core surfaces */
  --sx-bg-0: #08050d;
  --sx-bg-1: #0e0a16;
  --sx-bg-2: #15101f;
  --sx-sidebar: rgba(7, 5, 12, 0.96);
  --sx-panel: rgba(255, 255, 255, 0.045);
  --sx-panel-2: rgba(255, 255, 255, 0.068);
  --sx-panel-hover: rgba(255, 255, 255, 0.075);
  --sx-panel-active: rgba(216, 76, 255, 0.13);

  /* Borders / dividers */
  --sx-border-0: rgba(255, 255, 255, 0.07);
  --sx-border-1: rgba(255, 255, 255, 0.11);
  --sx-border-accent: rgba(216, 76, 255, 0.36);

  /* Text */
  --sx-text-0: #f4edf8;
  --sx-text-1: rgba(244, 237, 248, 0.76);
  --sx-text-2: rgba(244, 237, 248, 0.52);

  /* Brand accents */
  --sx-accent: #d84cff;
  --sx-accent-2: #7b61ff;
  --sx-accent-hot: #ff4f9a;
  --sx-accent-soft: rgba(216, 76, 255, 0.12);
  --sx-success: #1df2a5;
  --sx-warning: #ffb15c;
  --sx-danger: #ff5f7a;

  /* Shape / depth */
  --sx-radius-xs: 7px;
  --sx-radius-sm: 10px;
  --sx-radius-md: 14px;
  --sx-radius-lg: 20px;
  --sx-radius-xl: 28px;
  --sx-shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.26);
  --sx-shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.34);
  --sx-glow-accent: 0 0 28px rgba(216, 76, 255, 0.12);
  --sx-focus-ring: 0 0 0 3px rgba(216, 76, 255, 0.18);
  --sx-blur-panel: 14px;

  /* Legacy compatibility mapping. Keep old selectors alive while new UI can use --sx-* tokens. */
  --bg-deep: var(--sx-bg-0);
  --bg-mid: var(--sx-bg-1);
  --sidebar-bg: var(--sx-sidebar);
  --card-bg: var(--sx-panel);
  --card-border: var(--sx-border-0);
  --accent: var(--sx-accent);
  --accent2: var(--sx-accent-2);
  --text: var(--sx-text-0);
  --text-muted: var(--sx-text-2);
  --live-color: var(--sx-success);
  --not-live-color: var(--sx-warning);
  --input-bg: rgba(255, 255, 255, 0.055);
  --input-border: var(--sx-border-1);
  --row-hover: var(--sx-panel-hover);
}

[data-theme="light"] {
  color-scheme: light;

  --sx-bg-0: #f8f3fb;
  --sx-bg-1: #efe6f5;
  --sx-bg-2: #ffffff;
  --sx-sidebar: rgba(252, 247, 255, 0.96);
  --sx-panel: rgba(255, 255, 255, 0.72);
  --sx-panel-2: rgba(255, 255, 255, 0.88);
  --sx-panel-hover: rgba(124, 97, 255, 0.075);
  --sx-panel-active: rgba(216, 76, 255, 0.13);

  --sx-border-0: rgba(53, 29, 79, 0.10);
  --sx-border-1: rgba(53, 29, 79, 0.16);
  --sx-border-accent: rgba(176, 55, 222, 0.34);

  --sx-text-0: #21162d;
  --sx-text-1: rgba(33, 22, 45, 0.72);
  --sx-text-2: rgba(33, 22, 45, 0.50);

  --sx-accent: #b928dc;
  --sx-accent-2: #6250df;
  --sx-accent-hot: #d93676;
  --sx-accent-soft: rgba(185, 40, 220, 0.11);
  --sx-success: #008f66;
  --sx-warning: #b86620;
  --sx-danger: #c63450;

  --sx-radius-xs: 7px;
  --sx-radius-sm: 10px;
  --sx-radius-md: 14px;
  --sx-radius-lg: 20px;
  --sx-radius-xl: 28px;
  --sx-shadow-soft: 0 18px 45px rgba(45, 23, 61, 0.12);
  --sx-shadow-panel: 0 24px 70px rgba(45, 23, 61, 0.16);
  --sx-glow-accent: 0 0 26px rgba(185, 40, 220, 0.10);
  --sx-focus-ring: 0 0 0 3px rgba(185, 40, 220, 0.16);
  --sx-blur-panel: 14px;

  --bg-deep: var(--sx-bg-0);
  --bg-mid: var(--sx-bg-1);
  --sidebar-bg: var(--sx-sidebar);
  --card-bg: var(--sx-panel);
  --card-border: var(--sx-border-0);
  --accent: var(--sx-accent);
  --accent2: var(--sx-accent-2);
  --text: var(--sx-text-0);
  --text-muted: var(--sx-text-2);
  --live-color: var(--sx-success);
  --not-live-color: var(--sx-warning);
  --input-bg: rgba(255, 255, 255, 0.78);
  --input-border: var(--sx-border-1);
  --row-hover: var(--sx-panel-hover);
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(216, 76, 255, 0.12), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(123, 97, 255, 0.10), transparent 26%),
    linear-gradient(145deg, var(--sx-bg-0), var(--sx-bg-1));
}

.card,
.stat-card,
.song-card,
.album-card,
.command-center-card,
.command-center-panel,
.backup-center,
.package-center,
.visual-vault-card,
.visual-vault-editor,
.prompt-vault-panel,
.album-vault-panel,
.changelog-card,
.health-card,
.ui-lab-panel {
  box-shadow: var(--sx-shadow-soft);
}

.card,
.stat-card,
.command-center-card,
.command-center-panel,
.backup-center,
.package-center,
.visual-vault-card,
.prompt-vault-panel,
.album-vault-panel,
.changelog-card,
.health-card,
.ui-lab-panel {
  backdrop-filter: blur(var(--sx-blur-panel));
  -webkit-backdrop-filter: blur(var(--sx-blur-panel));
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.nav-btn.active,
.nav-btn.primary,
.command-center-direct.active {
  box-shadow: var(--sx-glow-accent);
}