/* =============================================================================
   Incipit ConsultEdge — Premium Public Design System (Foundations)
   FILE 1 OF 4 — DESIGN TOKENS + BASE
   Re-themed to the Incipit ConsultEdge premium palette, inspired by the
   visual hierarchy, spacing, storytelling and premium presentation of the
   Shopify Winter Editions "Foundations" reference (https://shopify.com/editions/winter2024):
   generous whitespace, strong editorial hierarchy, smooth section transitions,
   gradient accents and immersive card layouts. Our own branding and content
   are retained — this sheet only supplies the consistent colour/typography
   language every public page inherits via Bootstrap 5 utility classes.
   Load after bootstrap.min.css + fontawesome all.min.css + incipit-fonts.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens — Incipit premium palette on :root (light theme)
   Palette:
     Primary   #3D52A0  — primary buttons, active menu items, links, key
                          headings, icons
     Secondary #7091E6  — hover states, gradients, highlights, feature
                          sections, counters
     Accent    #8697C4  — borders, dividers, secondary actions, subtle accents
     Surface   #ADBBDA  — cards, mega menus, forms, testimonials, section
                          surfaces
     Background #EDE8F5 — main page background and content sections
   ----------------------------------------------------------------------------- */
:root {
  /* === Brand colours === */
  --bs-primary: #3D52A0;
  --bs-primary-rgb: 61, 82, 160;
  --bs-primary-bg-subtle: #EEF1FF;           /* 95 % tint */
  --bs-primary-border-subtle: #CBD6F0;      /* 75 % tint */
  --bs-primary-text-emphasis: #28357A;      /* 30 % shade */

  /* Brand hover/gradient hue. Kept light on purpose — it is a SURFACE/gradient
     tone, never a text colour. For text use --bs-secondary-text-emphasis
     (#7091E6 only reaches 2.7:1 on the page background). */
  --bs-secondary: #7091E6;
  --bs-secondary-rgb: 112, 145, 230;
  --bs-secondary-bg-subtle: #EEF2FF;
  --bs-secondary-border-subtle: #CCDFFF;
  --bs-secondary-text-emphasis: #3563C4;   /* 5.03:1 on --bs-secondary-bg-subtle */

  --bs-accent: #8697C4;
  --bs-accent-rgb: 134, 151, 196;
  --bs-accent-bg-subtle: #EEF0F7;
  --bs-accent-border-subtle: #D4DCEB;

  --bs-surface: #ADBBDA;
  --bs-surface-rgb: 173, 187, 218;
  --bs-surface-bg-subtle: #E6EAF0;
  --bs-surface-border-subtle: #C7D4E8;

  --bs-background: #F2F0F9;

  /* === Map contextual families onto the premium palette ===
     The Awake reference used a rainbow of info/success/warning/danger tints;
     Shopify Winter Editions is monochromatic. Every semantic family now
     resolves to a purple-family tint so service cards, step circles and
     badges read as one consistent language while still offering two tones
     (primary / secondary) for subtle visual rhythm. === */
  /* Semantic families are consumed directly as TEXT by public views
     (style="color:var(--bs-info)" etc.), so each must clear 4.5:1 on its own
     -bg-subtle tint. The former #7091E6 info / #2D8A56 success only managed
     2.73:1 and 4.01:1. */
  --bs-info: #3563C4;                      /* 5.03:1 on --bs-info-bg-subtle */
  --bs-info-rgb: 53, 99, 196;
  --bs-info-bg-subtle: #EEF2FF;
  --bs-info-border-subtle: #CCDFFF;
  --bs-info-text-emphasis: #3563C4;

  --bs-success: #1F6B41;                   /* 6.04:1 on --bs-success-bg-subtle */
  --bs-success-rgb: 31, 107, 65;
  --bs-success-bg-subtle: #EDFAF3;
  --bs-success-border-subtle: #A8E6C3;
  --bs-success-text-emphasis: #1A5C38;

  --bs-warning: #B45309;
  --bs-warning-rgb: 180, 83, 9;
  --bs-warning-bg-subtle: #FEF3E2;
  --bs-warning-border-subtle: #FAD7A0;
  --bs-warning-text-emphasis: #7A3806;

  --bs-danger: #B91C2B;
  --bs-danger-rgb: 185, 28, 43;
  --bs-danger-bg-subtle: #FEE8EA;
  --bs-danger-border-subtle: #F9A8AE;
  --bs-danger-text-emphasis: #7A1218;

  /* Legacy Awake custom tokens — remapped to the premium palette so no
     stray orange/amber surfaces remain on any page. */
  --bs-light-orange: #EEF2FF;
  --bs-light-orange-rgb: 238, 242, 255;
  --bs-orange: #7091E6;
  --bs-orange-rgb: 112, 145, 230;

  /* === Neutrals === */
  --bs-dark: #1B1D1E;             /* near-black: headings, dark-emphasis text & surfaces */
  --bs-dark-rgb: 27, 29, 30;
  --bs-dark-bg-subtle: #313437;
  --bs-dark-border-subtle: #222425;
  --bs-dark-text-emphasis: #101112;

  --bs-white: #ffffff;
  --bs-white-rgb: 255, 255, 255;

  --bs-light: #ffffff;            /* clean card / section surface */
  --bs-light-rgb: 255, 255, 255;
  --bs-light-bg-subtle: #F7F8FA;
  --bs-light-border-subtle: #E8E8EC;

  /* === Text / background / borders === */
  --bs-body-color: #4A4A55;        /* soft dark for body copy on lavender */
  --bs-body-color-rgb: 74, 74, 85;
  --bs-body-bg: #F2F0F9;
  --bs-body-bg-rgb: 242, 240, 249;
  --bs-emphasis-color: #1B1D1E;
  --bs-secondary-color: rgba(74, 74, 85, 0.85);  /* 5.26:1 (was 0.72 = 3.85:1) */
  --bs-secondary-bg: #F2F0F9;
  --bs-tertiary-color: #67677A;                  /* 4.90:1 — no alpha of #4A4A55 reaches 4.5 */
  --bs-tertiary-bg: #EEF0FF;
  --bs-heading-color: #1B1D1E;
  --bs-link-color: #3D52A0;
  --bs-link-color-rgb: 61, 82, 160;
  --bs-link-hover-color: #2F5CBF;   /* 5.47:1 — hover must stay readable (was 2.70:1) */
  --bs-link-hover-color-rgb: 47, 92, 191;
  --bs-code-color: #3563C4;
  --bs-highlight-bg: #EEF1FF;

  /* === Borders / radius / shadows === */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #7183B5;      /* 3.31:1 on page bg — WCAG 1.4.11 for input borders
                                      (the #8697C4 accent only reached 2.57:1) */
  --bs-border-color-translucent: rgba(134, 151, 196, 0.40);

  --bs-border-radius: 0.375rem;    /* 6px — controls, general */
  --bs-border-radius-sm: 0.25rem;  /* 4px — data surfaces */
  --bs-border-radius-lg: 0.5rem;   /* 8px — feature cards */
  --bs-border-radius-xl: 0.75rem;  /* 12px — modals */
  --bs-border-radius-xxl: 1.25rem; /* 20px — hero max */
  --bs-border-radius-pill: 9999px;

  --bs-box-shadow: 0 4px 24px rgba(58, 88, 155, 0.10),
                    0 1px 3px rgba(27, 29, 30, 0.06);
  --bs-box-shadow-sm: 0 2px 8px rgba(58, 88, 155, 0.08);
  --bs-box-shadow-lg: 0 24px 60px rgba(58, 88, 155, 0.14);
  --bs-box-shadow-inset: unset;
  --bs-focus-ring-color: rgba(61, 82, 160, 0.25);
  --bs-form-valid-color: #1A5C38;
  --bs-form-invalid-color: #B91C2B;

  /* === Subtle surface helpers (used by cards & tinted backgrounds) === */
  --bs-primary-bg-subtle: #EEF1FF;
  --bs-secondary-bg-subtle: #EEF2FF;
  --bs-info-bg-subtle: #EEF2FF;
  --bs-success-bg-subtle: #EDFAF3;
  --bs-warning-bg-subtle: #FEF3E2;
  --bs-danger-bg-subtle: #FEE8EA;
  --bs-light-bg-subtle: #FFFFFF;
  --bs-dark-bg-subtle: #313437;

  --bs-gutter-x: 24px;

  /* Typography — Inter Tight editorial display, generous leading */
  --bs-font-sans-serif: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Premium gradient token (Primary → Secondary) */
  --bs-gradient-primary: linear-gradient(135deg, #3D52A0 0%, #7091E6 100%);
  --bs-gradient-surface: linear-gradient(135deg, #F2F0F9 0%, #EEF1FF 100%);
}

/* -----------------------------------------------------------------------------
   2. Base — reset, body, typography, links, focus, vertical rhythm
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--bs-link-hover-color);
}

ul {
  list-style: none;
  padding-left: 0;
}

p {
  line-height: 1.6;
}

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

/* Editorial accent — serif display used inside <em> */
.font-instrument {
  font-family: "Instrument Serif", serif;
  font-style: italic;
}

/* Editorial headings — strong hierarchy, tight leading */
h1, h2, h3, h4, h5, h6 {
  color: var(--bs-heading-color);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
h3 { line-height: 1.15; }
h4 { line-height: 1.2; }
h5 { line-height: 1.3; }
h6 { line-height: 1.4; }

/* Fluid editorial heading scale (matches Shopify Winter Editions impact) */
h1 { font-size: calc(2rem + 6.4vw); }
h2 { font-size: calc(1.6rem + 2.6vw); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
  h1 { font-size: 6rem; }
  h2 { font-size: 2.75rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.375rem; }
  h5 { font-size: 1.25rem; }
  h6 { font-size: 1.125rem; }
}

/* Container matches premium editorial max-width */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1296px;
  }
}

/* Blockquote / pull-quote styling for editorial storytelling */
blockquote {
  margin: 0;
  font-style: italic;
  color: var(--bs-heading-color);
}

.figure {
  margin: 0;
}

.focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
}