/* =============================================================================
   Wakefield Pacific — Design Tokens
   "Accountants for the Ambitious"
   Source: WP_StyleGuide V1.0 (19/12/23) — 40/40 Creative
   ============================================================================= */

/* ------- Fonts (brand-licensed) ------------------------------------------------
   Display:  Sharp Grotesk Bold 15 (huge headlines) / Bold 10 (smaller headlines)
   Body:     Fraktion Mono (Regular / Bold / italics)
-------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Sharp Grotesk';
  src: url('fonts/SharpGrotesk-Bold15.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Narrower cut used for smaller display sizes */
  font-family: 'Sharp Grotesk 10';
  src: url('fonts/SharpGrotesk-Bold10.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraktion Mono';
  src: url('fonts/FraktionMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraktion Mono';
  src: url('fonts/FraktionMono-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraktion Mono';
  src: url('fonts/FraktionMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraktion Mono';
  src: url('fonts/FraktionMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLOUR ---------- */
  /* Primary */
  --wp-olive:        #968532;  /* /1 Primary — workhorse, backgrounds, signage */
  --wp-yellow:       #F7FC90;  /* /2 Primary — high-energy accents, CTAs, highlights */

  /* Secondary */
  --wp-blue:         #0F08B3;  /* /3 Secondary — rope/depth, duotone base */
  --wp-maroon:       #390808;  /* /4 Secondary — gravitas, signage, print */
  --wp-lavender:     #E4DAFE;  /* /5 Secondary — light contrast, illustrations */

  /* Neutrals (brand-adjacent — derived for app surfaces) */
  --wp-ink:          #0B0B0B;  /* body ink on light */
  --wp-paper:        #FFFFFF;  /* paper */
  --wp-bone:         #EDECE4;  /* light grey panels (from pattern page) */
  --wp-smoke:        #C9C7BD;  /* mid grey */

  /* Approved mixing pairs (from "MIXING COLOURS" matrix) */
  --pair-olive-yellow:   var(--wp-olive)     var(--wp-yellow);
  --pair-olive-blue:     var(--wp-olive)     var(--wp-blue);
  --pair-olive-maroon:   var(--wp-olive)     var(--wp-maroon);
  --pair-yellow-olive:   var(--wp-yellow)    var(--wp-olive);
  --pair-yellow-blue:    var(--wp-yellow)    var(--wp-blue);
  --pair-yellow-maroon:  var(--wp-yellow)    var(--wp-maroon);
  --pair-blue-olive:     var(--wp-blue)      var(--wp-olive);
  --pair-blue-yellow:    var(--wp-blue)      var(--wp-yellow);
  --pair-blue-lavender:  var(--wp-blue)      var(--wp-lavender);
  --pair-maroon-olive:   var(--wp-maroon)    var(--wp-olive);
  --pair-maroon-yellow:  var(--wp-maroon)    var(--wp-yellow);
  --pair-maroon-lavender:var(--wp-maroon)    var(--wp-lavender);
  --pair-lavender-olive: var(--wp-lavender)  var(--wp-olive);
  --pair-lavender-blue:  var(--wp-lavender)  var(--wp-blue);
  --pair-lavender-maroon:var(--wp-lavender)  var(--wp-maroon);
  /* Do NOT pair: yellow on lavender (insufficient contrast — per guide) */

  /* ---------- TYPOGRAPHY ---------- */
  --ff-display:    'Sharp Grotesk', 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --ff-display-10: 'Sharp Grotesk 10', 'Sharp Grotesk', 'Oswald', Impact, sans-serif;
  --ff-mono:       'Fraktion Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Display scale — D-01 (Sharp Grotesk Bold 15 @ 2x-10x)
     D-02 (Sharp Grotesk Bold 10 @ 5x). 1x base = 16px. */
  --fs-display-xxl: clamp(4rem, 10vw + 1rem, 10rem);   /* D-01 hero  */
  --fs-display-xl:  clamp(3rem, 7vw + 1rem, 7rem);
  --fs-display-lg:  clamp(2.25rem, 5vw + 1rem, 5rem);  /* D-02       */
  --fs-display-md:  clamp(1.75rem, 3vw + 1rem, 3rem);
  --fs-display-sm:  1.5rem;

  /* Body scale — Fraktion Mono */
  --fs-body-xl:     1.125rem;  /* lead         */
  --fs-body:        1rem;      /* 1x           */
  --fs-body-sm:     0.875rem;  /* 0.875x       */
  --fs-label:       0.75rem;   /* eyebrows/meta */
  --fs-micro:       0.625rem;

  /* Line heights (per guide) */
  --lh-display:     1.00;      /* 100% */
  --lh-body:        1.20;      /* 120% */
  --lh-header:      1.20;      /* Body Header / Buttons 120% */

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-label:  0.06em;  /* uppercase mono labels */
  --tracking-wide:   0.12em;

  /* ---------- SPACING & LAYOUT ---------- */
  --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;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;   /* rounded card, seen on brand personality tiles */
  --radius-pill: 999px;

  --border-hair: 1px solid currentColor;
  --rule:        1px solid color-mix(in srgb, currentColor 20%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  260ms;
  --dur-slow: 520ms;
}

/* ---------- TYPE UTILITY CLASSES ---------- */
.wp-display-xxl { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-xxl); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.wp-display-xl  { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-xl);  line-height: var(--lh-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.wp-display-lg  { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-lg);  line-height: var(--lh-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.wp-display-md  { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-md);  line-height: var(--lh-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; }

.wp-mono        { font-family: var(--ff-mono); font-weight: 400; line-height: var(--lh-body); }
.wp-mono-bold   { font-family: var(--ff-mono); font-weight: 700; line-height: var(--lh-header); }
.wp-label       { font-family: var(--ff-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--wp-ink);
  background: var(--wp-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- PATTERN (topographic, scalable SVG) ---------- */
.wp-pattern-topo {
  background-color: var(--wp-olive);
  background-image: var(--wp-topo-url);
  background-size: 800px 800px;
  background-repeat: repeat;
}