/* Design tokens — the single source of truth for colour, spacing and shape.
 *
 * Loaded first by every page. Contains no rules that render anything, so it is
 * safe to include anywhere: it only declares custom properties.
 */

:root {
  /* Brand colours — blue theme */
  --primary: #2377d6;
  --primary-light: #4c91e1;
  --primary-dark: #1d5faa;
  --primary-glow: rgba(35, 119, 214, 0.15);
  --primary-gradient: linear-gradient(
    135deg,
    var(--primary-light),
    var(--primary)
  );

  /* Background gradients */
  --bg-deep: #090e19;
  --bg-gradient-main: linear-gradient(to bottom, #0e1828, var(--bg-deep));
  --bg-gradient-card: linear-gradient(145deg, #0e3157, #07182b);
  --bg-gradient-accent: linear-gradient(135deg, #4c91e1, #2377d6);

  /* Grey scale, darkest to lightest */
  --gray-50: #040d17; /* darkest — page background */
  --gray-100: #07182b;
  --gray-200: #0e3157;
  --gray-300: #14467f;
  --gray-400: #1d5faa;
  --gray-500: #2377d6;
  --gray-600: #73aae7;
  --gray-700: #a0c5ef;
  --gray-800: #d0e2f7;
  --gray-900: #ffffff;

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-muted: #6b7a99;

  /* Borders */
  --border-light: var(--gray-400);
  --border-medium: var(--gray-500);
  --border-hairline: rgba(115, 170, 231, 0.18);
  --border-soft: rgba(115, 170, 231, 0.22);

  /* Shape */
  --radius: 8px;
  --radius-lg: 12px;

  /* Spacing scale */
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Effects */
  --shadow: 0 1px 3px 0 rgba(0 0 0 / 0.25), 0 0 20px var(--primary-glow);
}