/**
 * minxi Dark Theme
 * Semantic variable mapping from --minxi-* design tokens to app-level names.
 * Load after tokens.css and reset.css. All dark-themed apps share this file.
 *
 * Usage:
 *   <link rel="stylesheet" href="https://static.minxi.ai/css/tokens.css">
 *   <link rel="stylesheet" href="https://static.minxi.ai/css/reset.css">
 *   <link rel="stylesheet" href="https://static.minxi.ai/css/theme-dark.css">
 */

:root {
  /* === Background & Surfaces === */
  --background-start: #0a0014;
  --background-end: #0d001c;
  --primary-surface: rgba(255, 255, 255, 0.04);
  --secondary-surface: rgba(255, 255, 255, 0.06);
  --elevated-surface: rgba(255, 255, 255, 0.08);

  /* === Text === */
  --text-primary: #f0eef5;
  --text-secondary: #a09cb0;
  --text-tertiary: #7d7894;     /* dimmer than secondary — used for footer meta, locale codes, timestamps */
  --text-muted: #6b6680;
  --text-on-accent: #ffffff;

  /* === Accent (from design tokens) === */
  --accent-primary: var(--minxi-color-primary-400, #818cf8);
  --accent-secondary: var(--minxi-color-primary-300, #a5b4fc);
  --accent-gradient: linear-gradient(135deg, var(--minxi-color-primary-500, #6366f1), var(--minxi-color-primary-400, #818cf8));
  --glow-color: rgba(99, 102, 241, 0.15);
  --glow-color-strong: rgba(99, 102, 241, 0.45);

  /* Primary accent aliases — some chrome surfaces (locale switcher current
     state, etc.) reference these shorter names. Keep in step with accent-*. */
  --color-primary: var(--minxi-color-primary-500, #6366f1);
  --color-primary-soft: rgba(99, 102, 241, 0.18);

  /* === Borders === */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-strong: rgba(255, 255, 255, 0.15);

  /* === Status Colors (from design tokens) === */
  --color-success: var(--minxi-color-success-500, #10b981);
  --color-warning: var(--minxi-color-warning-500, #f59e0b);
  --color-danger: var(--minxi-color-error-500, #ef4444);
  --color-info: var(--minxi-color-info-500, #3b82f6);

  /* === Typography (from design tokens) === */
  --font-family: var(--minxi-font-family-sans, "Inter", system-ui, sans-serif);
  --font-mono: var(--minxi-font-family-mono, "JetBrains Mono", ui-monospace, monospace);
  --font-size-xs: var(--minxi-font-size-xs, 0.75rem);
  --font-size-sm: var(--minxi-font-size-sm, 0.875rem);
  --font-size-base: var(--minxi-font-size-md, 1rem);
  --font-size-lg: var(--minxi-font-size-lg, 1.125rem);
  --font-size-xl: var(--minxi-font-size-xl, 1.25rem);
  --font-size-2xl: var(--minxi-font-size-2xl, 1.5rem);
  --font-size-3xl: var(--minxi-font-size-3xl, 1.875rem);
  --font-weight-regular: var(--minxi-font-weight-normal, 400);
  --font-weight-medium: var(--minxi-font-weight-medium, 500);
  --font-weight-semibold: var(--minxi-font-weight-semibold, 600);
  --font-weight-bold: var(--minxi-font-weight-bold, 700);

  /* === Spacing (from design tokens) === */
  --space-xs: var(--minxi-space-1, 0.25rem);
  --space-sm: var(--minxi-space-2, 0.5rem);
  --space-md: var(--minxi-space-4, 1rem);
  --space-lg: var(--minxi-space-8, 2rem);
  --space-xl: var(--minxi-space-16, 4rem);

  /* === Radii (from design tokens) === */
  --radius-sm: var(--minxi-radius-sm, 0.25rem);
  --radius-md: var(--minxi-radius-md, 0.375rem);
  --radius-lg: var(--minxi-radius-lg, 0.5rem);
  --radius-xl: var(--minxi-radius-xl, 0.75rem);
  --radius-full: var(--minxi-radius-full, 9999px);

  /* === Shadows === */
  --shadow-sm: var(--minxi-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
  --shadow-md: var(--minxi-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
  --shadow-lg: var(--minxi-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));

  /* === Transitions (from design tokens) === */
  --transition-fast: var(--minxi-transition-fast, 150ms ease);
  --transition-base: var(--minxi-transition-normal, 250ms ease);
  --transition-slow: var(--minxi-transition-slow, 350ms ease);

  /* === Z-Index (from design tokens) === */
  --z-dropdown: var(--minxi-z-dropdown, 100);
  --z-sticky: var(--minxi-z-sticky, 200);
  --z-overlay: var(--minxi-z-overlay, 300);
  --z-modal: var(--minxi-z-modal, 400);
  --z-toast: var(--minxi-z-toast, 500);

  /* === Layout === */
  --sidebar-width: 260px;
  --header-height: 56px;
  --site-header-height: 64px;   /* marketing site chrome — slightly taller than admin */
  --site-max-width: 1200px;     /* shared max-width for chrome (header/footer inner) */
  --section-py: clamp(4rem, 8vw, 7rem); /* shared vertical rhythm for public-site blocks */
}

/* Base body styling for dark theme.
   Flat dark-purple gradient is the brand backdrop — do not layer accent
   blurs over this without approval. Block-level accent glows
   (.block-hero::before, .block-cta background) already add depth where
   it belongs. */
html, body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--background-start), var(--background-end));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-color-strong);
}

/* Selection styling */
::selection {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}