/* ==========================================================================
   CloudVault Theme — Ant Design Dark Mode
   All design tokens defined as CSS custom properties.
   No hardcoded values elsewhere in the codebase.
   ========================================================================== */

:root {
  /* --- Colors: Base palette (Ant Design dark) --- */
  --color-base: #141414;              /* App background */
  --color-base-raise-1: #1f1f1f;     /* Raised surface (cards, panels) */
  --color-base-raise-2: #2a2a2a;     /* Hover, active states */
  --color-base-raise-3: #383838;     /* Borders, dividers */

  /* --- Colors: Text --- */
  --color-text: rgba(255, 255, 255, 0.85);
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-tertiary: rgba(255, 255, 255, 0.45);
  --color-text-inverse: #141414;

  /* --- Colors: Brand / accent (Ant Design blue) --- */
  --color-primary: #1668dc;
  --color-primary-hover: #4096ff;
  --color-primary-active: #0958d9;
  --color-primary-bg: rgba(22, 104, 220, 0.15);

  /* --- Colors: Status --- */
  --color-success: #49aa19;
  --color-warning: #d89614;
  --color-error: #dc4446;
  --color-error-hover: #b8363a;
  --color-info: #1668dc;

  /* --- Colors: Status backgrounds (for badges, badges, hover states) --- */
  --color-success-bg: rgba(73, 170, 25, 0.15);
  --color-warning-bg: rgba(216, 150, 20, 0.15);
  --color-error-bg: rgba(220, 68, 70, 0.15);
  --color-error-bg-hover: rgba(220, 68, 70, 0.1);

  /* --- Fonts --- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  /* --- Font sizes --- */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* --- Font weights --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Spacing --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* --- Border radius --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* --- Shadows (subtle, for dark mode) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- Layout dimensions --- */
  --layout-header-height: 64px;
  --layout-sidebar-width: 240px;
  --layout-content-max-width: 1200px;
  --layout-content-min-height: 400px;

  /* --- Z-index scale --- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 2000;

  /* --- Icons (SVG data URIs — single source for mask-image + favicon) --- */
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231668dc' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
}

/* --- Global reset / base styles --- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary-hover);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-base);
}

::-webkit-scrollbar-thumb {
  background: var(--color-base-raise-3);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-base-raise-2);
}