/* =====================================================================
   HOLIGINE design tokens
   Source: Holigine Brand Toolkit v1.0 (Remote Branding, Nov 2026).
   Every brand value lives here so it can be changed in one place.
   ===================================================================== */

@font-face {
  font-family: "Aspekta";
  src: url("../fonts/AspektaVF.woff2") format("woff2-variations"), url("../fonts/AspektaVF.woff2") format("woff2");
  font-weight: 50 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --c-deep: #240E47;      /* Deep Purple, primary */
  --c-cream: #FCF8F4;     /* Cream, surface */
  --c-purple: #7739FD;    /* Purple, accent */
  --c-white: #FFFFFF;
  --c-mint: #5CD4B1;
  --c-blue: #2C5BFD;
  --c-pink: #FAA6FF;
  --c-grey: #AEAEB2;      /* lines and quiet UI only, never text on white */

  /* Roles */
  --bg: var(--c-cream);
  --surface: var(--c-white);
  --ink: var(--c-deep);
  --ink-2: rgba(36, 14, 71, 0.74);       /* secondary text on light grounds */
  --ink-3: rgba(36, 14, 71, 0.58);       /* tertiary, large or UI only */
  --line: rgba(36, 14, 71, 0.12);
  --line-strong: rgba(36, 14, 71, 0.22);
  --accent: var(--c-purple);
  --on-dark: var(--c-cream);
  --on-dark-2: rgba(252, 248, 244, 0.76);
  --line-dark: rgba(252, 248, 244, 0.16);
  --tint-purple: #F1EBFF;                /* Purple at ~10% on white, for UI fills */
  --tint-mint: #E3F7F0;

  /* Audience colours: one brand colour per solution, reused on its own page */
  --aud-agents: var(--c-mint);        --aud-agents-soft: #DAF4EC;     --aud-agents-ink: #0E8C69;
  --aud-companies: var(--c-purple);   --aud-companies-soft: #F1EBFF;  --aud-companies-ink: #7739FD;
  --aud-brands: var(--c-pink);        --aud-brands-soft: #FEEDFF;     --aud-brands-ink: #B43BC4;

  /* Brand gradients (exact stops from the logo arc) */
  --arc-fade: linear-gradient(90deg, #7739FD 0%, rgba(119,57,253,.71) 25%, rgba(119,57,253,.33) 60%, rgba(119,57,253,.09) 84%, rgba(119,57,253,0) 96%);
  --deep-fade: linear-gradient(135deg, #7739FD 0%, #240E47 70%);

  /* Typography */
  --f-display: "all-round-gothic", "Aspekta", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Aspekta", "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  --t-h2: clamp(2.125rem, 1.3rem + 3.2vw, 4rem);
  --t-h3: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem);
  --t-h4: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Layout */
  --wrap: 1320px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --section-y: clamp(88px, 11vw, 168px);

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius (soft, from the brand's rounded panels) */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(36,14,71,.06), 0 2px 8px rgba(36,14,71,.06);
  --shadow-md: 0 2px 6px rgba(36,14,71,.06), 0 12px 32px rgba(36,14,71,.10);
  --shadow-lg: 0 4px 12px rgba(36,14,71,.08), 0 28px 64px rgba(36,14,71,.16);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 140ms;
  --d-ui: 200ms;
  --d-reveal: 900ms;

  --header-h: 76px;
}