/*
 * Hexicor proposal portal — design tokens (the SINGLE place to restyle the brand).
 *
 * Colours, fonts, radii, shadows and layout widths for every proposal surface:
 * the customer portal (/q), the rep builder (/build), and the design previews.
 * Loaded BEFORE proposal.css (and build.css) on each page, so changing a value
 * here re-themes all three at once. A rebrand should rarely need to touch
 * anything but this file.
 *
 * 2026-06-09 brand rebrand (Claude Design handoff "hexicor-portal-dynamics"):
 * off-brand slate/green-teal + Inter  →  official Hexicor ICT palette
 * (navy #002553 · blue #018DCD · teal #0097B2) + self-hosted Hexicor Sans.
 * Source of truth: "Hexicor ICT Style Guide.pdf" / colors_and_type.css.
 * Local variable names are unchanged so proposal.css/build.css hooks keep
 * working — only the values moved to brand.
 */

/* ===== FONT — Hexicor Sans, self-hosted (matches script-src 'self' CSP).
   All 16 faces declared; browsers lazy-load only the weights actually used. ===== */
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 100; font-display: swap; src: url('/assets/fonts/HexicorSans-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 100; font-display: swap; src: url('/assets/fonts/HexicorSans-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url('/assets/fonts/HexicorSans-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 200; font-display: swap; src: url('/assets/fonts/HexicorSans-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/HexicorSans-Light.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/HexicorSans-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/HexicorSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/HexicorSans-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/HexicorSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/HexicorSans-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/HexicorSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/HexicorSans-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/HexicorSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/HexicorSans-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/HexicorSans-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 800; font-display: swap; src: url('/assets/fonts/HexicorSans-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/HexicorSans-Black.ttf') format('truetype'); }
@font-face { font-family: 'Hexicor Sans'; font-style: italic; font-weight: 900; font-display: swap; src: url('/assets/fonts/HexicorSans-BlackItalic.ttf') format('truetype'); }

/* ===== BRAND TOKENS (official Hexicor ICT) ===== */
:root {
  --blue: #018dcd;          /* primary — actions, links emphasis */
  --teal: #0097b2;          /* secondary — accents, ticks, section underline */
  --teal-light: #d3eef2;    /* teal tint */
  --teal-mid: #5de0e6;      /* bright cyan — accents on navy surfaces */
  --navy: #002553;          /* dark blue — headings, dark surfaces */
  --navy-light: #093a72;
  --bg: #f4f7fa;            /* cool section background */
  --paper: #ffffff;
  --text: #1d2b3a;
  --text-muted: #6b7685;
  --text-light: #9aa6b4;
  --border: #e2e8f0;
  --border-light: #eef2f7;
  --error: #b91c1c;
  --shadow: 0 1px 2px rgba(0,37,83,.06), 0 1px 3px rgba(0,37,83,.08);
  --shadow-lg: 0 16px 40px rgba(0,37,83,.16);
  --radius: 12px;
  --radius-sm: 4px;
  --font: 'Hexicor Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max-width: 900px;

  /* section heading / group-name weight — Medium per the brand handoff
     ("headers don't need to be AS bold, but still bold") */
  --hx-head-weight: 500;

  /* signature gradients */
  --grad-brand: linear-gradient(120deg, var(--navy) 0%, var(--blue) 55%, var(--teal) 100%);
  --grad-pill:  linear-gradient(180deg, #1ea3da 0%, var(--blue) 55%, #0277b0 100%);
  --grad-spine: linear-gradient(180deg, var(--teal) 0%, var(--blue) 45%, var(--navy) 100%);

  /* Activated layout */
  --sidebar-width: 260px;
}