/* ==========================================================================
   PROMPT WORKSPACE — DESIGN TOKENS
   Signature concept: "The Studio" — a dark, precision workspace for AI prompts.
   Violet (structure/intelligence) + Ember (focused energy, used sparingly
   as the single accent that marks anything "live", active, or in progress).
   ========================================================================== */

:root{
  /* ---- Ember & Violet core hues -------------------------------------- */
  --hue-violet: 255 92% 76%;
  --hue-ember:  20 100% 63%;

  /* ---- Accent scale (theme-independent) -------------------------------*/
  --accent-50:  #F1EEFF;
  --accent-100: #E1DBFF;
  --accent-200: #C7BBFF;
  --accent-300: #A78BFA;
  --accent-400: #8B6CF9;
  --accent-500: #7C5CFC;
  --accent-600: #6845E8;
  --accent-700: #5636C4;
  --accent-800: #402A8F;
  --accent-900: #2B1D63;

  --ember-300: #FFB088;
  --ember-400: #FF9760;
  --ember-500: #FF7A45;
  --ember-600: #F0602A;
  --ember-700: #C74A1D;

  --success-400: #4ADE80;
  --success-500: #34D399;
  --warning-400: #FBBF24;
  --warning-500: #F5A524;
  --danger-400:  #FB7185;
  --danger-500:  #F87171;
  --info-400:    #60A5FA;
  --info-500:    #3B9EFF;

  /* ---- Radii ------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- Spacing scale ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---- Typography ------------------------------------------------- */
  --font-display: "Workspace Display", "Space Grotesk", ui-sans-serif, "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-body: "Workspace Sans", ui-sans-serif, "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono: "Workspace Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.8125rem;   /* 13 */
  --fs-base:0.9375rem;   /* 15 */
  --fs-md:  1.0625rem;   /* 17 */
  --fs-lg:  1.25rem;     /* 20 */
  --fs-xl:  1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;    /* 30 */
  --fs-3xl: 2.375rem;    /* 38 */
  --fs-4xl: 3rem;        /* 48 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  --tracking-tightest: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: -0.006em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;

  /* ---- Elevation / shadow ------------------------------------------ */
  --shadow-color: 250 40% 4%;
  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.35);
  --shadow-sm: 0 2px 6px hsl(var(--shadow-color) / 0.28), 0 1px 2px hsl(var(--shadow-color) / 0.3);
  --shadow-md: 0 8px 24px -6px hsl(var(--shadow-color) / 0.38), 0 2px 8px hsl(var(--shadow-color) / 0.22);
  --shadow-lg: 0 20px 48px -12px hsl(var(--shadow-color) / 0.46), 0 4px 16px hsl(var(--shadow-color) / 0.24);
  --shadow-glow-accent: 0 0 0 1px hsl(var(--hue-violet) / 0.35), 0 8px 30px -6px hsl(var(--hue-violet) / 0.55);
  --shadow-glow-ember: 0 0 0 1px hsl(var(--hue-ember) / 0.4), 0 8px 26px -6px hsl(var(--hue-ember) / 0.6);

  /* ---- Motion --------------------------------------------------------*/
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ------------------------------------------------------ */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 60;
  --z-modal: 100;
  --z-toast: 200;
  --z-palette: 150;
}

/* ==========================================================================
   DARK THEME (default)
   ========================================================================== */
:root,
[data-theme="dark"]{
  --bg-canvas: #08090E;
  --bg-canvas-alt: #0C0E16;
  --bg-surface: #12141E;
  --bg-surface-2: #171A26;
  --bg-surface-3: #1D2131;
  --bg-elevated: #1A1D2B;
  --bg-glass: rgba(23, 26, 38, 0.72);
  --bg-glass-strong: rgba(18, 20, 30, 0.88);
  --bg-hover: rgba(255,255,255,0.045);
  --bg-active: rgba(124, 92, 252, 0.14);

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  --text-primary: #F3F3F8;
  --text-secondary: #A7AABC;
  --text-tertiary: #6E7186;
  --text-disabled: #4B4E60;
  --text-on-accent: #0B0714;

  --accent: var(--accent-500);
  --accent-strong: var(--accent-400);
  --accent-soft: rgba(124, 92, 252, 0.16);
  --ember: var(--ember-500);
  --ember-soft: rgba(255, 122, 69, 0.16);

  --scrollbar-thumb: rgba(255,255,255,0.14);
  --scrollbar-track: transparent;

  color-scheme: dark;
}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
[data-theme="light"]{
  --bg-canvas: #F6F6FA;
  --bg-canvas-alt: #EFEFF6;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #FBFBFE;
  --bg-surface-3: #F2F2F8;
  --bg-elevated: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.78);
  --bg-glass-strong: rgba(255, 255, 255, 0.92);
  --bg-hover: rgba(20, 21, 31, 0.035);
  --bg-active: rgba(124, 92, 252, 0.1);

  --border-subtle: rgba(20,21,31,0.06);
  --border-default: rgba(20,21,31,0.1);
  --border-strong: rgba(20,21,31,0.18);

  --text-primary: #14151F;
  --text-secondary: #5C5F72;
  --text-tertiary: #8A8DA0;
  --text-disabled: #C2C4D2;
  --text-on-accent: #FFFFFF;

  --accent: var(--accent-600);
  --accent-strong: var(--accent-700);
  --accent-soft: rgba(104, 69, 232, 0.1);
  --ember: var(--ember-600);
  --ember-soft: rgba(240, 96, 42, 0.1);

  --scrollbar-thumb: rgba(20,21,31,0.16);
  --scrollbar-track: transparent;

  --shadow-color: 250 30% 60%;
  color-scheme: light;
}

/* ---- Accent theme overrides (user-selectable, cascades over base) ---- */
[data-accent="violet"]{ --accent: var(--accent-500); --accent-strong: var(--accent-400); }
[data-theme="light"][data-accent="violet"]{ --accent: var(--accent-600); --accent-strong: var(--accent-700); }

[data-accent="ember"]{ --accent: var(--ember-500); --accent-strong: var(--ember-400); --accent-soft: rgba(255,122,69,0.16); }
[data-theme="light"][data-accent="ember"]{ --accent: var(--ember-600); --accent-strong: var(--ember-700); --accent-soft: rgba(240,96,42,0.1); }

[data-accent="mint"]{ --accent: #2FD9A8; --accent-strong: #4CE6BB; --accent-soft: rgba(47,217,168,0.16); }
[data-theme="light"][data-accent="mint"]{ --accent: #0FA982; --accent-strong: #0C8A69; --accent-soft: rgba(15,169,130,0.1); }

[data-accent="azure"]{ --accent: #3B9EFF; --accent-strong: #62B4FF; --accent-soft: rgba(59,158,255,0.16); }
[data-theme="light"][data-accent="azure"]{ --accent: #1C7FE0; --accent-strong: #1667B8; --accent-soft: rgba(28,127,224,0.1); }

[data-accent="rose"]{ --accent: #FB7BA2; --accent-strong: #FF9CBC; --accent-soft: rgba(251,123,162,0.16); }
[data-theme="light"][data-accent="rose"]{ --accent: #E14C7C; --accent-strong: #C43B67; --accent-soft: rgba(225,76,124,0.1); }

/* ---- Compact mode ---- */
[data-density="compact"]{
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 18px;
  --topbar-h: 56px;
}

/* ---- Reduced motion / animation toggle ---- */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ---- Font size scale ---- */
[data-fontsize="sm"]{ --fs-base: 0.875rem; --fs-md: 1rem; --fs-lg: 1.15rem; }
[data-fontsize="md"]{ --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; }
[data-fontsize="lg"]{ --fs-base: 1.0625rem; --fs-md: 1.1875rem; --fs-lg: 1.375rem; }