/*
 * THEME VARIABLES
 * ---------------
 * Every colour, font, radius and shadow used across the site is defined
 * ONCE here as a CSS custom property. Nothing else in the codebase should
 * hard-code a colour - change a brand colour by editing this file only.
 *
 * Bootstrap 5.3 itself is theme-able via CSS variables (--bs-*), so this
 * file also remaps the Bootstrap variables to point at our own tokens.
 * That means every Bootstrap component (buttons, badges, alerts, forms...)
 * automatically follows this palette with zero Sass recompilation.
 */

:root {
  /* ----------------------------------------------------------------
   * 1. BRAND COLOUR TOKENS - change these to re-theme the whole site
   * ---------------------------------------------------------------- */
  --color-primary-h: 226;
  --color-primary-s: 100%;
  --color-primary-l: 58%;

  --color-primary: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
  --color-primary-rgb: 43, 91, 255;
  --color-primary-dark: hsl(var(--color-primary-h) var(--color-primary-s) 42%);
  --color-primary-darker: hsl(var(--color-primary-h) var(--color-primary-s) 28%);
  --color-primary-light: hsl(var(--color-primary-h) 100% 68%);
  --color-primary-soft: hsl(var(--color-primary-h) 100% 96%);

  --color-secondary: #0B1233;         /* deep navy - headers, footer, dark sections */
  --color-secondary-rgb: 11, 18, 51;
  --color-secondary-light: #171F4A;

  --color-accent: #FF6A3D;            /* energetic orange - CTAs, highlights */
  --color-accent-rgb: 255, 106, 61;
  --color-accent-dark: #E24F22;
  --color-accent-light: #FF8F6B;
  --color-accent-soft: #FFF1EC;

  --color-success: #16A34A;
  --color-success-soft: #E9F9EF;
  --color-warning: #F59E0B;
  --color-warning-soft: #FFF7E6;
  --color-danger: #E11D48;
  --color-danger-soft: #FDECEF;
  --color-info: var(--color-primary);

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-body-bg: #F6F8FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F0F3FA;
  --color-border: #E4E9F4;

  --color-gray-50: #F8FAFC;
  --color-gray-100: #EEF1F8;
  --color-gray-300: #C7CEE0;
  --color-gray-500: #7C86A6;
  --color-gray-700: #454E6B;
  --color-gray-900: #12162B;

  --color-text: #1B2140;
  --color-text-muted: #616B8C;
  --color-text-on-dark: #E7EAF7;
  --color-text-on-dark-muted: #A6AECF;

  /* ----------------------------------------------------------------
   * 2. TYPOGRAPHY
   * ---------------------------------------------------------------- */
  --font-heading: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ----------------------------------------------------------------
   * 3. SHAPE, DEPTH & MOTION
   * ---------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(11, 18, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 18, 51, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 18, 51, 0.12);
  --shadow-primary: 0 14px 30px -8px rgba(var(--color-primary-rgb), 0.55);
  --shadow-accent: 0 14px 30px -8px rgba(var(--color-accent-rgb), 0.5);

  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.18s var(--ease-out-soft);
  --transition-base: 0.32s var(--ease-out-soft);
  --transition-slow: 0.55s var(--ease-out-soft);

  --container-max: 1240px;

  /* ----------------------------------------------------------------
   * 4. BOOTSTRAP 5.3 VARIABLE OVERRIDES
   *    Remap Bootstrap's own custom properties to our tokens so every
   *    Bootstrap component follows the same theme automatically.
   * ---------------------------------------------------------------- */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-gray-500);
  --bs-secondary-rgb: 124, 134, 166;
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-info: var(--color-info);
  --bs-light: var(--color-surface-alt);
  --bs-dark: var(--color-secondary);

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-body-bg);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: var(--color-primary-rgb);
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);
}