/* Veterinary IT Services — Design Tokens
   Fonts are loaded via <link> in the head partial (preconnect + stylesheet),
   not @import here — @import in CSS blocks the CSSOM until resolved. */

:root {
  /* ===== OFFICIAL BRAND PALETTE (Veterinary IT Services brand guidelines) =====
     Source: Brand Logo Guidelines Poster — PWS_1..4 + black. These are the
     ONLY brand-correct colours. Earlier brighter purple (#5B2EFF) was wrong. */
  --pws-1:            #42046D;  /* PWS_1 — PRIMARY brand purple (deep) */
  --pws-2:            #242442;  /* PWS_2 — dark navy support */
  --pws-3:            #289F6E;  /* PWS_3 — confirmation green */
  --pws-4:            #FF6B00;  /* PWS_4 — accent orange */
  --pws-black:        #000000;  /* deep type / line work */

  /* Semantic aliases — older code referenced these names */
  --vet-purple:       var(--pws-1);
  --deep-purple:      var(--pws-2);
  --midnight-navy:    #101828;  /* footer-only deep neutral */
  --pale-lilac:       #F4EAFB;  /* soft purple panel tint (derived) */
  --soft-lavender:    #EADBFA;  /* hover/badge tint (derived) */
  --white:            #FFFFFF;
  --warm-off-white:   #FAF8F4;  /* alternating section bg */

  /* ===== SECONDARY PALETTE ===== */
  --clinical-blue:    #2DB7FF;
  --trust-teal:       var(--pws-3);
  --soft-mint:        #E5F5EE;
  --warm-grey:        #EEF0F4;
  --slate-grey:       #475467;
  --charcoal:         #1D2939;

  /* ===== ACCENT PALETTE ===== */
  --alert-coral:      #FF5A5F;
  --success-green:    var(--pws-3);
  --warning-amber:    var(--pws-4);
  --innovation-pink:  #F044A7;

  /* ===== SEMANTIC ===== */
  --bg:               var(--white);
  --bg-alt:           var(--warm-off-white);
  --bg-panel:         var(--soft-lavender);
  --bg-dark:          var(--deep-purple);
  --bg-darkest:       var(--midnight-navy);

  --fg:               var(--charcoal);
  --fg-muted:         var(--slate-grey);
  --fg-on-dark:       var(--white);
  --fg-on-dark-muted: rgba(255,255,255,0.72);

  --accent:           var(--vet-purple);
  --accent-soft:      var(--soft-lavender);
  --border:           #E4E7EC;
  --border-strong:    #D0D5DD;
  --border-on-dark:   rgba(255,255,255,0.12);

  /* ===== TYPOGRAPHY =====
     Official brand typeface: BRICOLAGE GROTESQUE (variable, opsz 12..96).
     Used for all display and body type. Plus Jakarta Sans kept as a
     secondary humanist option. JetBrains Mono is the brand mono. */
  --font-serif:   'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Bricolage Grotesque', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ===== SPACING (8pt) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== RADII ===== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 2px 6px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 8px 20px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
  --shadow-lg: 0 20px 40px rgba(16,24,40,0.10), 0 6px 12px rgba(16,24,40,0.04);
  --shadow-purple: 0 14px 32px rgba(91,46,255,0.28);

  /* ===== MOTION ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ===== TYPE PRIMITIVES ===== */
html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display, .eyebrow {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Type scale — website */
.t-hero        { font-size: clamp(48px, 7vw, 88px); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
.t-section     { font-size: clamp(34px, 4.5vw, 58px); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }
.t-h3          { font-size: 28px; font-weight: 600; line-height: 1.2; }
.t-h4          { font-size: 22px; font-weight: 600; line-height: 1.25; }
.t-body-lg     { font-size: 19px; line-height: 1.55; color: var(--fg-muted); }
.t-body        { font-size: 17px; line-height: 1.6; color: var(--fg-muted); }
.t-small       { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.t-eyebrow     {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vet-purple);
}