/* ============================================================
   Future Advisory 2026 - design tokens

   A flattened copy of the redesign's tokens/*.css, in the order its
   styles.css @imports them, followed by that file's base reset. Kept as
   one file because WordPress enqueues one stylesheet, not an @import
   manifest.

   The ONLY edit is the webfont path: the export serves them from
   ../assets/fonts/, this theme from ../fonts/.

   Re-sync with: the five files in the export's tokens/ folder. Do not
   hand-edit a value here -- change it in the export and copy again, or the
   next re-sync silently reverts it.
   ============================================================ */


/* ---- tokens/fonts.css ---- */
/* ============================================================
   Future Advisory — Webfonts
   Display: Test Söhne Breit (Klim Type Foundry — TRIAL/TEST cut)
   Body:    Plus Jakarta Sans
   ------------------------------------------------------------
   NOTE: The uploaded "Test Söhne Breit" files are trial/test
   licences ("TestSohneBreit-*"). Swap in the licensed cut for
   production. The Figma source set BODY copy in Epilogue; the
   finalised brand (per uploaded fonts + brief) uses Plus Jakarta
   Sans for body — that substitution is intentional.
   ============================================================ */

/* --- Test Söhne Breit — display / headings / buttons / eyebrows --- */
@font-face {
  font-family: "Test Söhne Breit";
  src: url("../fonts/TestSohneBreit-Buch.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Test Söhne Breit";
  src: url("../fonts/TestSohneBreit-Kraftig.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Test Söhne Breit";
  src: url("../fonts/TestSohneBreit-Halbfett.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Test Söhne Breit";
  src: url("../fonts/TestSohneBreit-Dreiviertelfett.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* --- Plus Jakarta Sans — body / UI copy --- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ---- tokens/colors.css ---- */
/* ============================================================
   Future Advisory — Colour tokens
   Values transcribed EXACTLY from the Figma source (inline fills).
   "Boardroom Bright": white ground, near-black ink, bold flat
   accent blocks (purple / mint / yellow), hard square edges.
   ============================================================ */

:root {
  /* ---- Base palette ---- */
  --fa-white:        #FFFFFF;              /* rgb(255,255,255) — page ground */
  --fa-ink:          #050E1E;              /* rgb(5,14,30)     — near-black primary text / dark sections */

  --fa-purple:       #5939F5;              /* rgb(89,57,245)   — accent: eyebrows, CTA blocks, industry card */
  --fa-purple-alt:   #5A3AF5;              /* rgb(90,58,245)   — comparison-table highlight column */

  --fa-mint:         #50DDA4;              /* rgb(80,221,164)  — primary button, logo mark, service tile */
  --fa-green:        #50DDA4;              /* rgb(80,221,164)  — proof section ground, "yes" check badge */

  --fa-yellow:       #FBEB4F;              /* rgb(251,235,79)  — tiles, pricing block, final-CTA button, star */
  --fa-yellow-alt:   #FCEB4E;              /* rgb(252,235,78)  — accounting service card ground */
  --fa-yellow-soft:  #FDF68F;              /* rgb(253,246,143) — pricing highlight scribble */

  --fa-orange:       #FE5322;              /* rgb(254,83,34)   — "no" cross badge */
  --fa-blue:         #57B0E4;              /* rgb(87,176,228)  — accent tile */
  --fa-pink:         #EC97D8;              /* rgb(236,151,216) — accent tile */

  --fa-grey-95:      #F6F6F6;              /* rgb(246,246,246) — services section ground */
  --fa-grey-94:      #F2F2F2;              /* rgb(242,242,242) — industries section ground */

  /* ---- Alpha / overlay ---- */
  --fa-ink-20:       rgba(5,14,30,0.2);    /* thin divider on light */
  --fa-white-20:     rgba(255,255,255,0.2);/* borders / dividers on dark */
  --fa-white-21:     rgba(255,255,255,0.21);
  --fa-white-10:     rgba(255,255,255,0.1);/* faint footer rule */
  --fa-white-60:     rgba(255,255,255,0.6);/* muted text on dark */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --surface-page:        var(--fa-white);
  --surface-dark:        var(--fa-ink);      /* dark hero / proof / footer sections */
  --surface-muted:       var(--fa-grey-95);  /* subtle section ground */
  --surface-muted-2:     var(--fa-grey-94);

  --text-primary:        var(--fa-ink);
  --text-on-dark:        var(--fa-white);
  --text-on-dark-muted:  var(--fa-white-60);
  --text-accent:         var(--fa-purple);   /* eyebrow labels */

  --accent:              var(--fa-purple);
  --accent-block:        var(--fa-purple);   /* full-bleed accent panels */

  /* Button surfaces */
  --btn-primary-bg:      var(--fa-mint);
  --btn-primary-fg:      var(--fa-ink);
  --btn-yellow-bg:       var(--fa-yellow);
  --btn-yellow-fg:       var(--fa-ink);
  --btn-outline-fg:      var(--fa-ink);
  --btn-outline-border:  var(--fa-ink);
  --btn-outline-on-dark-fg:     var(--fa-white);
  --btn-outline-on-dark-border: var(--fa-white);

  /* Feedback badges */
  --badge-yes:           var(--fa-green);
  --badge-no:            var(--fa-orange);

  /* Dividers */
  --divider-on-light:    var(--fa-ink-20);
  --divider-on-dark:     var(--fa-white-20);

  /* Flat tile grounds (hero / decorative) */
  --tile-blue:           var(--fa-blue);
  --tile-yellow:         var(--fa-yellow);
  --tile-purple:         var(--fa-purple);
  --tile-mint:           var(--fa-mint);
  --tile-pink:           var(--fa-pink);
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Future Advisory — Typography tokens
   Display: "Test Söhne Breit" (600 Halbfett is the workhorse).
   Body:    "Plus Jakarta Sans" (Medium). Tight negative tracking
   throughout. All sizes/tracking transcribed from the Figma source
   (H1 hero scale taken from the finalised brief).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Test Söhne Breit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Weights ---- */
  --fw-buch:          400;   /* @kind font */
  --fw-kraftig:       500;   /* @kind font */
  --fw-halbfett:      600;   /* @kind font */
  --fw-dreiviertel:   700;   /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-hero:      60px;   /* H1 hero */
  --fs-price:     80px;   /* oversized pricing figure */
  --fs-section:   48px;   /* section headings */
  --fs-h3:        40px;   /* sub-heading (pricing teaser lead) */
  --fs-card:      28px;   /* card titles */
  --fs-quote:     24px;   /* pull-quote / feature title */
  --fs-lead:      20px;   /* lead body / footer heading */
  --fs-body:      18px;   /* buttons, rating */
  --fs-base:      16px;   /* body copy, nav, links */
  --fs-sm:        14px;   /* meta / role */

  /* ---- Line heights ---- */
  --lh-tight:     0.9;    /* @kind font */
  --lh-flush:     1;      /* @kind font */
  --lh-heading:   1.1;    /* @kind font */
  --lh-body:      1.4;    /* @kind font */

  /* ---- Letter-spacing ---- */
  --ls-hero:      -1.8px;  /* H1 */
  --ls-section:   -0.03em; /* section headings */
  --ls-card:      -0.02em; /* card titles */
  --ls-price:     -0.05em; /* pricing figure */
  --ls-tight:     -0.01em; /* body / buttons / links */
  --ls-nav:       -0.01em;

  /* ============================================================
     Composite text roles (font shorthands via custom props).
     Apply with e.g.  font: var(--type-section);
     ============================================================ */
  --type-hero:     var(--fw-halbfett) var(--fs-hero)/var(--lh-tight) var(--font-display);
  --type-section:  var(--fw-halbfett) var(--fs-section)/var(--lh-heading) var(--font-display);
  --type-h3:       var(--fw-halbfett) var(--fs-h3)/var(--lh-heading) var(--font-display);
  --type-card:     var(--fw-kraftig) var(--fs-card)/var(--lh-flush) var(--font-display);
  --type-quote:    var(--fw-buch) var(--fs-quote)/var(--lh-body) var(--font-display);
  --type-eyebrow:  var(--fw-halbfett) var(--fs-base)/var(--lh-flush) var(--font-display);
  --type-button:   var(--fw-halbfett) var(--fs-body)/var(--lh-flush) var(--font-display);
  --type-link:     var(--fw-halbfett) var(--fs-base)/var(--lh-flush) var(--font-display);
  --type-lead:     var(--fw-kraftig) var(--fs-lead)/var(--lh-body) var(--font-body);
  --type-body:     var(--fw-kraftig) var(--fs-base)/var(--lh-body) var(--font-body);
  --type-body-lg:  var(--fw-kraftig) var(--fs-lead)/var(--lh-body) var(--font-body);
  --type-meta:     var(--fw-kraftig) var(--fs-sm)/var(--lh-body) var(--font-body);
}

/* ============================================================
   Responsive type scale (--ts-*). Desktop → tablet (≤1199) → mobile (≤599).
   Separate from the legacy desktop-only --fs-* tokens above (left untouched).
   ============================================================ */
:root {
  --ts-h1:60px; --ts-h2:48px; --ts-h3:28px; --ts-h4:24px;
  --ts-lead:32px; --ts-quote:24px; --ts-body-lg:20px; --ts-body:16px;
  --ts-small:14px; --ts-eyebrow:16px; --ts-stat:80px; --ts-stat-sm:60px;
}
@media (max-width:1199px){ :root{
  --ts-h1:48px; --ts-h2:36px; --ts-h3:24px; --ts-h4:22px;
  --ts-lead:26px; --ts-quote:20px; --ts-body-lg:20px; --ts-body:16px;
  --ts-small:14px; --ts-eyebrow:16px; --ts-stat:72px; --ts-stat-sm:56px;
}}
@media (max-width:599px){ :root{
  --ts-h1:36px; --ts-h2:30px; --ts-h3:22px; --ts-h4:20px;
  --ts-lead:22px; --ts-quote:18px; --ts-body-lg:18px; --ts-body:16px;
  --ts-small:12px; --ts-eyebrow:14px; --ts-stat:60px; --ts-stat-sm:48px;
}}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   Future Advisory — Spacing, layout & shape tokens
   The layout is a fixed 1920px desktop canvas with a 1400px
   centred content column (260px side gutters). Vertical rhythm
   is driven by a 120px section pad. Edges are HARD — no radius
   on cards/buttons/tiles; only icon badges are circular.
   ============================================================ */

:root {
  /* ---- Canvas / layout ---- */
  --canvas-width:      1920px;   /* desktop artboard */
  --container-width:   1400px;   /* centred content column */
  --gutter:            260px;    /* UNUSED — legacy 1920px-canvas value; page gutter is --sp-gutter */
  --section-pad-y:     120px;    /* top/bottom section padding */

  /* ---- Spacing scale (matches Figma auto-layout gaps) ---- */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   20px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  40px;
  --space-4xl:  48px;
  --space-5xl:  60px;
  --space-6xl:  80px;
  --space-7xl:  120px;

  /* ---- Component padding ---- */
  --pad-card:        32px;       /* service / industry cards */
  --pad-btn-y:       15px;       /* buttons: 15 vertical */
  --pad-btn-x:       20px;       /* buttons: 20 horizontal */
  --gap-card:        20px;       /* gap between cards in a row */

  /* ---- Fixed sizes ---- */
  --header-height:   80px;
  --tile-size:       280px;      /* hero flat-color image tiles */
  --btn-height:      48px;

  /* ---- Radius (mostly ZERO — square is the brand) ---- */
  --radius-none:     0px;        /* cards, buttons, tiles, inputs */
  --radius-pill:     999px;      /* icon badges / avatars only */
}

/* ============================================================
   Responsive spacing (--sp-*). Desktop → tablet (≤1199) → mobile (≤599).
   Separate from the fixed --space-* scale above (left untouched).
   ============================================================ */
:root{
  --sp-section:120px; --sp-gutter:40px; --sp-panel:40px;
  --sp-card:32px; --sp-stack:60px; --sp-grid:20px;
}
@media (max-width:1199px){ :root{
  --sp-section:80px; --sp-gutter:40px; --sp-panel:40px;
  --sp-card:32px; --sp-stack:40px; --sp-grid:20px;
}}
@media (max-width:599px){ :root{
  --sp-section:60px; --sp-gutter:16px; --sp-panel:24px;
  --sp-card:20px; --sp-stack:40px; --sp-grid:16px;
}}

/* ---- tokens/effects.css ---- */
/* ============================================================
   Future Advisory — Effects: borders, dividers, motion
   The brand is FLAT — no drop shadows. "Borders" are drawn as
   inset box-shadows (exactly as the Figma source does, so 1px
   outlines never take layout space and sit inside the box).
   Motion is quiet and functional: short fades, no bounce.
   ============================================================ */

:root {
  /* ---- Outline borders (inset box-shadow, brand convention) ---- */
  --border-ink:            inset 0 0 0 1px var(--fa-ink);          /* secondary button on light */
  --border-on-dark:        inset 0 0 0 1px var(--fa-white);        /* outline button on dark */
  --border-input-dark:     inset 0 0 0 1px var(--fa-white-20);     /* newsletter input */

  /* ---- Elevation ---- */
  --shadow-none:           none;   /* default: the brand does not use drop shadows */

  /* ---- Motion ---- */
  --ease-standard:         cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast:              120ms;  /* @kind other */
  --dur-base:              200ms;  /* @kind other */

  /* Interaction convention:
     - hover  → 0.85 opacity on solid buttons; fill-in on outline buttons
     - press  → 0.9 scale is NOT used; keep flat. Slight opacity dip only.
     - links  → chevron nudges +2px on hover */
  --hover-opacity:         0.85;  /* @kind other */
  --link-nudge:            2px;  /* @kind spacing */
}

/* ---- styles.css: base reset ---- */
/* --- Minimal base reset (brand defaults) --- */
:root {
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--fa-purple);
  color: var(--fa-white);
}