/**
 * Design Tokens - 2025 SaaS Design System
 * Brand: Proof Locker
 * Style: Dark SaaS (Linear/Vercel inspired)
 */

:root {
  /* ============================================
     BRAND COLORS
     ============================================ */

  /* Primary Brand Blues */
  --color-primary: #1F6FD6;
  --color-primary-hover: #1a5cb8;
  --color-primary-pressed: #15509a;
  --color-deep-blue: #0E3E8C;
  --color-light-blue: #6FB3F2;

  /* Accent Green (use sparingly) */
  --color-accent: #8BC53F;
  --color-accent-hover: #73a333;
  --color-accent-dark: #4E7F1E;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-silver: #D6D9DD;
  --color-gray: #8A8F98;
  --color-charcoal: #2B2F36;

  /* Lens Effects (use for visual effects only, never UI or text) */
  --color-purple-lens: #7B4FD9;
  --color-cyan-lens: #2ED1E2;

  /* ============================================
     SEMANTIC COLORS (derived from brand)
     ============================================ */

  /* Backgrounds */
  --bg-base: #0B0F1A;              /* Dark base background */
  --bg-surface: #2B2F36;           /* Elevated surface (cards, modals) */
  --bg-surface-hover: #343942;     /* Hover state for interactive surfaces */

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #D6D9DD;
  --text-muted: #8A8F98;
  --text-disabled: #5a5f68;

  /* Borders */
  --border-subtle: #2B2F36;
  --border-default: #3a3f48;
  --border-strong: #4a4f58;

  /* Status Colors */
  --color-success: #8BC53F;
  --color-success-bg: rgba(139, 197, 63, 0.1);
  --color-error: #E74C3C;
  --color-error-bg: rgba(231, 76, 60, 0.1);
  --color-warning: #F39C12;
  --color-warning-bg: rgba(243, 156, 18, 0.1);
  --color-info: #1F6FD6;
  --color-info-bg: rgba(31, 111, 214, 0.1);

  /* Interactive States */
  --color-focus-ring: rgba(31, 111, 214, 0.4);

  /* ============================================
     SPACING SCALE
     ============================================ */

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

  /* ============================================
     TYPOGRAPHY SCALE
     ============================================ */

  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Font Sizes */
  --text-xs: 12px;      /* Helper text, badges */
  --text-sm: 14px;      /* Base text */
  --text-base: 16px;    /* Emphasis, buttons */
  --text-lg: 18px;      /* Section headers */
  --text-xl: 20px;      /* Card titles */
  --text-2xl: 24px;     /* Page titles */
  --text-3xl: 30px;     /* Hero text */
  --text-4xl: 36px;     /* Large displays */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

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

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS (2 levels only - subtle)
     ============================================ */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
               0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-brand: 0 8px 16px -2px rgba(31, 111, 214, 0.6),
                  0 4px 8px -1px rgba(31, 111, 214, 0.5);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ============================================
     TRANSITIONS
     ============================================ */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     LAYOUT CONSTRAINTS
     ============================================ */

  --max-width-xs: 320px;
  --max-width-sm: 480px;
  --max-width-md: 640px;
  --max-width-lg: 768px;
  --max-width-xl: 1024px;
  --max-width-2xl: 1280px;
  --max-width-container: 1440px;
}

/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove default button styles */
button {
  font-family: inherit;
  cursor: pointer;
}

/* Remove default input styles */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Link styles - prevent default purple visited color */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

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

a:active {
  color: var(--color-primary-pressed);
}

/* Button links should inherit button colors, not link colors */
a.btn,
a.btn:visited,
a.btn:hover,
a.btn:active {
  color: inherit;
}

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
  color: var(--color-white);
}