/* ============================================================
   Pixlix · Pixlix Nova v7
   Premium creative studio · pixlix rail · violet accent
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  --color-sidebar: #ffffff;
  --color-sidebar-soft: #f5f7fb;
  --color-sidebar-hover: #eef2f9;
  --color-sidebar-line: #e2e8f0;
  --color-sidebar-text: #1e293b;
  --color-sidebar-muted: #64748b;

  --color-workspace: #eceef5;
  --color-surface: #ffffff;
  --color-surface-soft: #f7f8fc;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #e2e6f0;

  --color-text: #12121a;
  --color-muted: #5a5f72;
  --color-faint: #9499ab;
  --color-line: #e0e4ef;
  --color-line-strong: #c8cedd;

  --color-brand: #7c3aed;
  --color-brand-dark: #6d28d9;
  --color-brand-darker: #5b21b6;
  --color-brand-soft: #f5f3ff;
  --color-brand-softer: #ede9fe;

  --color-cyan: #0ea5e9;
  --color-cyan-dark: #0284c7;
  --color-cyan-soft: #e0f2fe;

  --color-danger: #ef4444;
  --color-danger-soft: #fef2f2;
  --color-success: #10b981;
  --color-success-soft: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-soft: #fffbeb;
  --color-info: #3b82f6;
  --color-info-soft: #eff6ff;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --rail-width: clamp(208px, 12vw + 48px, 248px);
  --font-size-base: 15px;
  --font-size-nav: 15px;
  --ui-font-scale: 1;
  --app-viewport-width: 100vw;
  --app-viewport-height: 100dvh;
  --rail-width-tablet: 220px;
  --rail-width-mobile: 280px;
  --chrome-height: 36px;
  --topbar-height: 56px;
  --workflow-height: 52px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(26, 29, 38, 0.04);
  --shadow-sm: 0 2px 8px rgba(26, 29, 38, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 29, 38, 0.08);
  --shadow-lg: 0 16px 40px rgba(26, 29, 38, 0.12);
  --shadow-brand: 0 4px 14px rgba(124, 58, 237, 0.32);
  --shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.22);
  --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #0ea5e9 100%);
  --gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --gradient-workspace: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(14, 165, 233, 0.05) 0%, transparent 50%),
    var(--color-workspace);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  --font-sans: "Sora", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --z-chrome: 100;
  --z-topbar: 90;
  --z-rail: 80;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-dialog: 500;
  --z-update: 900;
  --z-guide: 1200;
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

::selection {
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-text);
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  width: var(--app-viewport-width);
  min-height: var(--app-viewport-height);
  height: var(--app-viewport-height);
  background: var(--color-workspace);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app {
  position: relative;
  z-index: 1;
  width: var(--app-viewport-width);
  height: var(--app-viewport-height);
  min-height: 0;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-dark); }

img, video { max-width: 100%; display: block; }

h1, h2, h3, h4, p { margin: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ── 3. Scrollbars ────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(92, 100, 120, 0.25);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 100, 120, 0.4);
  background-clip: padding-box;
  border: 3px solid transparent;
}