/* =========================================
   GLOBAL RESET
========================================= */

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

body {
    margin: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}


/* =========================================
   BASE VARIABLES
   Override these per project with brand.css
========================================= */

:root {

  /* Typography */
  --font-primary: "Helvetica Neue", Arial, sans-serif;
  --font-secondary: Georgia, serif;

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

  /* Fluid type scale */
  --text-xs: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);  /* 14 → 15px */
  --text-sm: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15 → 16px */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);      /* 16 → 18px */
  --text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* 18 → 20px */
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 → 24px */
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24 → 32px */
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);              /* 32 → 48px */
  --text-3xl: clamp(3rem, 8vw, 6.25rem);                    /* 48 → 100px */

  /* Semantic type tokens */
  --text-caption: var(--text-sm);
  --text-body: var(--text-base);
  --text-menu: var(--text-lg);
  --text-button: var(--text-lg);
  --text-subline: var(--text-xl);
  --text-display: var(--text-2xl);
  --text-hero: var(--text-3xl);

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.7;


  /* Primary colour scale */
  --color-primary-100: #e6efff;
  --color-primary-200: #b3ccff;
  --color-primary-300: #80aaff;
  --color-primary-400: #4d88ff;
  --color-primary-500: #0055ff;
  --color-primary-600: #0044cc;
  --color-primary-700: #003399;
  --color-primary-800: #002266;
  --color-primary-900: #001133;

  /* Secondary colour scale */
  --color-secondary-100: #f1f3f5;
  --color-secondary-200: #dee2e6;
  --color-secondary-300: #ced4da;
  --color-secondary-400: #adb5bd;
  --color-secondary-500: #6c757d;
  --color-secondary-600: #5a6268;
  --color-secondary-700: #495057;
  --color-secondary-800: #343a40;
  --color-secondary-900: #212529;

  /* Brand roles */
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);

  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);

  --color-accent: #ff6600;

  /* Neutrals */
  --color-black: #000000;
  --color-white: #ffffff;

  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Text */
  --text-color: var(--color-gray-900);
  --text-muted: var(--color-gray-600);

  /* Backgrounds */
  --bg-body: var(--color-white);
  --bg-light: var(--color-gray-100);
  --bg-dark: var(--color-gray-900);

  /* Links */
  --link-color: var(--color-primary);
  --link-hover: var(--color-accent);

  /* Spacing unit */ 
  --space-unit: .25rem; /* 4px base unit */

  /* Spacing */
  --space-xs: calc(var(--space-unit) * 1);  /* 4px */
  --space-sm: calc(var(--space-unit) * 2);  /* 8px */
  --space-md: calc(var(--space-unit) * 4);  /* 16px */
  --space-lg: calc(var(--space-unit) * 8);  /* 32px */
  --space-xl: calc(var(--space-unit) * 16); /* 64px */

  /* Borders */
  --border-radius: 4px;
  --border-color: var(--color-gray-300);

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 6px 20px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);

  /* Motion */
  --motion-scale: 1; /* 0.8 = faster, 1 = normal, 1.2 = slower */

  --motion-fast: calc(120ms * var(--motion-scale));
  --motion-base: calc(200ms * var(--motion-scale));
  --motion-slow: calc(320ms * var(--motion-scale));

  --ease-standard: ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Focus ring */
  --focus-ring-width: .2rem;
  --focus-ring-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  /* shorthand for box-shadow usage */
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* Button sizing (used by components/buttons.css if you want) */
  --btn-padding-y: .8rem;
  --btn-padding-x: 1.25rem;
  --btn-font-size: 1rem;

  /* Containers (use these in your own components, not to override Bootstrap .container) */
  --container-width: 1200px;
  --container-narrow: 720px;

  /* Section spacing (used by components/sections.css) */
  --section-padding: var(--space-xl);
  --section-padding-sm: var(--space-lg);
  --section-padding-lg: calc(var(--space-xl) * 1.5);


  /* =========================================
     BOOTSTRAP TOKEN MAPPING
     Keeps Bootstrap components on-brand
  ========================================= */

  /* Typography */
  --bs-body-font-family: var(--font-primary);
  --bs-body-font-size: var(--text-body);
  --bs-body-line-height: var(--line-height-base);

  /* Body */
  --bs-body-color: var(--text-color);
  --bs-body-bg: var(--bg-body);

  /* Links */
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--link-hover);

  /* Borders */
  --bs-border-color: var(--border-color);
  --bs-border-radius: var(--border-radius);

  /* Bootstrap theme colors */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);

  --bs-success: var(--color-primary);
  --bs-info: var(--color-accent);
  --bs-warning: var(--color-accent);

  --bs-danger: #dc3545; /* leave default unless design system defines one */

  --bs-light: var(--color-gray-100);
  --bs-dark: var(--color-gray-900);

}


/* =========================================
   GLOBAL BASE
========================================= */

body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background: var(--bg-body);
}


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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

p {
  margin-bottom: var(--space-md);
}

small {
  color: var(--text-muted);
}


/* =========================================
   LINKS
========================================= */

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}


/* =========================================
   RESPONSIVE MEDIA
========================================= */

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  max-width: 100%;
  display: block;
}

iframe {
  max-width: 100%;
  display: block;
}


/* =========================================
   BASIC UTILITIES
========================================= */

.bg-light {
  background: var(--bg-light);
}

.bg-dark {
  background: var(--bg-dark);
  color: var(--color-white);
}

.text-muted {
  color: var(--text-muted);
}


/* =========================================
   CONTAINER HELPERS (Framework-agnostic)

   These are lightweight container utilities
   for projects that are NOT using Bootstrap.

   If Bootstrap is present, prefer:
   .container
   .container-fluid

   These helpers exist so components and
   prototypes can still have consistent
   layout without requiring Bootstrap.
========================================= */

.wrap {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.wrap--narrow {
  max-width: var(--container-narrow);
}


/* =========================================
   FLOW UTILITY
   Adds consistent vertical spacing
========================================= */

.flow > * + * {
  margin-top: var(--space-md);
}

.flow-sm > * + * {
  margin-top: var(--space-sm);
}

.flow-lg > * + * {
  margin-top: var(--space-lg);
}

.flow-xl > * + * {
  margin-top: var(--space-xl);
}


/* =========================================
   INLINE FLEX UTILITY
   Aligns icons + text cleanly
========================================= */

.inline-flex {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}


/* =========================================
   BASE INTERACTION MOTION
   Prevents "poppy" UI without over-animating
========================================= */

a,
button,
.btn,
.form-control,
.form-select,
.form-check-input {
  transition-timing-function: var(--ease-standard);
  transition-duration: var(--motion-base);
}

/* Choose safe properties per element type */
a {
  transition-property: color, text-decoration-color;
}

button,
.btn {
  transition-property: background-color, border-color, color, box-shadow, transform;
}

.form-control,
.form-select {
  transition-property: border-color, box-shadow, background-color, color;
}

.form-check-input {
  transition-property: background-color, border-color, box-shadow;
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================
   DEBUG UTILITIES
   (only active when .debug is on <body>)
========================================= */

.debug * {
  /* outline: 1px solid rgba(255, 0, 0, 0.15); */
}

.debug img {
  outline: 1px solid rgba(0, 0, 255, 0.25);
}

.debug .container {
  outline: 2px dashed rgba(0, 150, 255, 0.6);
}

.debug .row {
  outline: 1px dashed rgba(0, 200, 0, 0.6);
}

/* visualize Bootstrap columns */
.debug [class*="col"] {
  outline: 1px dotted rgba(108, 35, 171, 0.5);
}