/* KyneticVPN theme tokens. Change primitive colors here to recolor the site. */
:root {
  /* H1Cloud-inspired reference palette */
  --kynetic-green-900: #111315;
  --kynetic-green-800: #1675df;
  --kynetic-green-600: #2388ff;
  --kynetic-green-500: #65aaff;
  --kynetic-green-100: #dbeaff;
  --kynetic-green-50: #edf5ff;
  --kynetic-ink-950: #111315;
  --kynetic-ink-700: #3e4650;
  --kynetic-ink-500: #737b85;
  --kynetic-paper: #ffffff;
  --kynetic-canvas: #f3f2ee;
  --kynetic-warm: #f6f7f8;
  --kynetic-danger: #c83737;

  /* Primitive dimensions */
  --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;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Semantic tokens */
  --color-background: var(--kynetic-canvas);
  --color-surface: var(--kynetic-paper);
  --color-surface-muted: var(--kynetic-warm);
  --color-foreground: var(--kynetic-ink-950);
  --color-muted: var(--kynetic-ink-500);
  --color-border: color-mix(in srgb, var(--color-primary-dark) 13%, transparent);
  --color-primary: var(--kynetic-green-600);
  --color-primary-hover: var(--kynetic-green-800);
  --color-primary-dark: var(--kynetic-green-900);
  --color-primary-soft: var(--kynetic-green-50);
  --color-danger: var(--kynetic-danger);
  --shadow-soft: 0 18px 50px color-mix(in srgb, var(--color-primary-dark) 8%, transparent);
  --shadow-card: 0 8px 28px color-mix(in srgb, var(--color-foreground) 6%, transparent);

  /* Compatibility tokens used by the existing application CSS */
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-muted);
  --text: var(--color-foreground);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --accent: var(--color-primary);
  --accent-light: var(--kynetic-green-500);
  --accent-dark: var(--color-primary-dark);
  --radius: var(--radius-md);
  --shadow: var(--shadow-card);

  /* Component tokens */
  --button-bg: var(--color-primary);
  --button-bg-hover: var(--color-primary-hover);
  --button-fg: #ffffff;
  --button-radius: 14px;
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: 22px;
  --input-bg: var(--color-surface);
  --input-border: var(--color-border);
  --input-focus: var(--color-primary);
}