/* ===========================================================================
   Design tokens — 8-step scale (same convention as bbailey/global.css)

   Canonical names (use these in new CSS):
     --color-*   --font-*   --text-*   --space-*   --radius-*
     --header-h  --section-y

   Layout width: use Bootstrap .container / .container-fluid only —
   do not redeclare .container in project CSS.

   Values match the current Team7India look — do not “retune” tokens to
   change appearance. Legacy aliases (--c-*, --sp-*, --fs-*, --r-*, --bg)
   keep style.css / pages.css working without visual diffs.

   Load order (same as bbailey):
     1. Bootstrap 5.3 CDN
     2. this file (global.css)
     3. style.css  (shared components)
     4. pages.css  (page-scoped sections)
=========================================================================== */

:root {

  /* Color ---------------------------------------------------------------- */
  --color-white: #ffffff;
  --color-ink: #14162b;
  --color-indigo: #17143a;
  --color-indigo-mid: #2e2a6b;
  --color-violet: #5b4fe9;
  --color-violet-strong: #4a3fd4;
  --color-violet-soft: #a9a2f7;
  --color-violet-tint: #efedfe;
  --color-spring: #22d07a;
  --color-spring-ink: #0b7a45;
  --color-spring-tint: #e6fbf0;
  --color-amber: #ffb020;
  --color-coral: #ff6b5a;
  --color-sky: #38bdf8;
  --color-mist: #f7f8fc;
  --color-lavender: #eef0fb;
  --color-line: #e3e6f2;
  --color-muted: #5c6180;
  --color-invert-muted: #b9b5d6;
  --color-line-brand: #d9d5fb;
  --color-line-accent: #bdebd3;
  --color-brand-navy: #17294d;
  --color-brand-orange: #ef5b15;
  --color-error: #c0392b;
  --color-error-invert: #ff9e92;
  --color-field-border: #d5d9ea;
  --color-violet-rgb: 91, 79, 233;
  --color-indigo-rgb: 23, 20, 58;

  /* Font ----------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type (fluid where needed — rem + vw, never bare vw) ------------------ */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);
  --text-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
  --text-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
  --text-h1: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);
  --text-display: clamp(2.75rem, 1.75rem + 4.4vw, 4.75rem);

  --leading-tight: 1.06;
  --leading-snug: 1.16;
  --leading-heading: 1.28;
  --leading-body: 1.68;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space — half-rem steps (preserves existing --sp-* sizes) ------------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */
  --space-grid: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);

  /* Radius --------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Elevation (violet-tinted, never flat grey) --------------------------- */
  --shadow-sm: 0 2px 8px rgba(23, 20, 58, 0.05);
  --shadow-md: 0 8px 24px rgba(23, 20, 58, 0.07);
  --shadow-lg: 0 20px 48px rgba(23, 20, 58, 0.1);
  --shadow-xl: 0 32px 80px rgba(23, 20, 58, 0.14);
  --shadow-brand: 0 16px 40px rgba(91, 79, 233, 0.22);

  /* Surfaces / gradients (sections only — never buttons/text) ------------ */
  --gradient-hero: radial-gradient(120% 90% at 50% 0%, #edebff 0%, var(--color-mist) 55%, var(--color-mist) 100%);
  --gradient-alt: radial-gradient(90% 120% at 85% 0%, #e8eafb 0%, var(--color-lavender) 60%);
  --gradient-invert: radial-gradient(100% 120% at 20% 0%, #2a2568 0%, var(--color-indigo) 70%);

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 560ms;
  --transition-fast: var(--duration-fast) var(--ease);
  --transition-base: var(--duration-base) var(--ease);
  --transition-slow: var(--duration-slow) var(--ease-soft);

  /* Layout (spacing only — content width is Bootstrap .container) -------- */
  --header-h: 76px;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* Z-index — never write raw z-index in components ----------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-backdrop: 290;
  --z-panel: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-skip: 900;

  /* Semantic surfaces (components may use these directly) ---------------- */
  --bg: var(--color-mist);
  --bg-alt: var(--color-lavender);
  --surface: var(--color-white);
  --surface-tint: var(--color-violet-tint);
  --bg-invert: var(--color-indigo);
  --text: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-invert: var(--color-white);
  --text-invert-muted: var(--color-invert-muted);
  --brand: var(--color-violet);
  --brand-strong: var(--color-violet-strong);
  --accent: var(--color-spring);
  --accent-ink: var(--color-spring-ink);
  --line: var(--color-line);
  --line-invert: rgba(255, 255, 255, 0.14);
  --line-brand: var(--color-line-brand);
  --line-accent: var(--color-line-accent);
  --focus: var(--color-violet);
  --field-bg: var(--color-white);
  --field-border: var(--color-field-border);

  /* Legacy aliases — same values, old names used in style.css / pages.css - */
  --c-ink-900: var(--color-ink);
  --c-indigo-900: var(--color-indigo);
  --c-indigo-700: var(--color-indigo-mid);
  --c-violet: var(--color-violet);
  --c-violet-600: var(--color-violet-strong);
  --c-violet-300: var(--color-violet-soft);
  --c-violet-50: var(--color-violet-tint);
  --c-spring: var(--color-spring);
  --c-spring-ink: var(--color-spring-ink);
  --c-spring-50: var(--color-spring-tint);
  --c-amber: var(--color-amber);
  --c-coral: var(--color-coral);
  --c-sky: var(--color-sky);
  --c-white: var(--color-white);
  --c-mist: var(--color-mist);
  --c-lavender: var(--color-lavender);
  --c-line: var(--color-line);
  --c-muted: var(--color-muted);
  --c-brand-navy: var(--color-brand-navy);
  --c-brand-orange: var(--color-brand-orange);
  --c-error: var(--color-error);
  --c-error-invert: var(--color-error-invert);
  --c-success: var(--color-spring-ink);

  --fs-eyebrow: var(--text-xs);
  --fs-small: var(--text-sm);
  --fs-body: var(--text-md);
  --fs-lead: var(--text-lg);
  --fs-h4: var(--text-h4);
  --fs-h3: var(--text-h3);
  --fs-h2: var(--text-h2);
  --fs-h1: var(--text-h1);
  --fs-hero: var(--text-display);

  --lh-tight: var(--leading-tight);
  --lh-snug: var(--leading-snug);
  --lh-heading: var(--leading-heading);
  --lh-body: var(--leading-body);
  --ls-eyebrow: var(--tracking-eyebrow);
  --ls-tight: var(--tracking-tight);
  --ls-tighter: var(--tracking-tighter);
  --fw-regular: var(--weight-regular);
  --fw-medium: var(--weight-medium);
  --fw-semibold: var(--weight-semibold);
  --fw-bold: var(--weight-bold);

  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);
  --sp-7: var(--space-7);
  --sp-8: var(--space-8);
  --sp-9: var(--space-9);
  --sp-10: var(--space-10);
  --gap-grid: var(--space-grid);

  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --r-pill: var(--radius-pill);

  --shadow-violet: var(--shadow-brand);
  --grad-hero: var(--gradient-hero);
  --grad-alt: var(--gradient-alt);
  --grad-invert: var(--gradient-invert);

  --t-fast: var(--transition-fast);
  --t-base: var(--transition-base);
  --t-slow: var(--transition-slow);

  /* Bootstrap 5.3 theme bridge (utilities / components use --bs-*) -------- */
  --bs-primary: var(--color-violet);
  --bs-primary-rgb: var(--color-violet-rgb);
  --bs-secondary: var(--color-indigo);
  --bs-secondary-rgb: var(--color-indigo-rgb);
  --bs-success: var(--color-spring-ink);
  --bs-danger: var(--color-error);
  --bs-warning: var(--color-amber);
  --bs-info: var(--color-sky);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: var(--weight-regular);
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-mist);
  --bs-heading-color: var(--color-ink);
  --bs-link-color: var(--color-violet-strong);
  --bs-link-hover-color: var(--color-indigo-mid);
  --bs-border-color: var(--color-line);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-font-sans-serif: var(--font-body);
  --bs-font-monospace: var(--font-mono);
  --bs-emphasis-color: var(--color-ink);
  --bs-secondary-color: var(--color-muted);
  --bs-tertiary-bg: var(--color-lavender);
  --bs-focus-ring-color: rgba(var(--color-violet-rgb), 0.35);
}

@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }
}

/* ===========================================================================
   RESET / BASE
   Reasserts site rules after Bootstrap Reboot so the look stays ours.
=========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

address { font-style: normal; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

::selection { background: var(--color-violet-soft); color: var(--color-indigo); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}