/* =============================================================
   ThriveMap design tokens — the single source of truth
   for colour, type, spacing, radii, and shadows across the
   entire site. Every component reads from these variables.

   Copied from docs/build-spec/tokens.css. The only change from
   the source is the @font-face URLs: this file lives in
   assets/css/, the fonts in assets/fonts/, so paths are "../fonts/...".
   ============================================================= */

/* ---------------------------------------------------------------
   FONT FACES
   Served from /wp-content/themes/<theme>/assets/fonts/.
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Reckless';
  src: url('../fonts/reckless/RecklessM-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reckless';
  src: url('../fonts/reckless/RecklessM-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Reckless';
  src: url('../fonts/reckless/RecklessM-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reckless';
  src: url('../fonts/reckless/RecklessM-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Reckless';
  src: url('../fonts/reckless/RecklessM-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Diatype';
  src: url('../fonts/diatype/Diatype-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Diatype';
  src: url('../fonts/diatype/Diatype-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Diatype';
  src: url('../fonts/diatype/Diatype-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Diatype';
  src: url('../fonts/diatype/Diatype-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* -----------------------------------------------------------
     COLOUR
     ----------------------------------------------------------- */

  /* Brand anchors */
  --cobalt:       #2D499F;   /* Primary brand colour. Buttons, links, accents. */
  --cobalt-deep:  #1F326E;   /* Dark CTA block, hover state for cobalt. */
  --cobalt-soft:  #ECEDF5;   /* Tinted surface for selected states, mini-callouts. */

  /* Ink (text) */
  --ink:          #15161B;   /* Body text, headings */
  --ink-soft:     #3D3F4A;   /* Secondary text, supporting copy */
  --ink-mute:     #74757F;   /* Tertiary text, captions, timestamps */

  /* Surfaces */
  --canvas:       #F7F4ED;   /* Warm cream page background — the canvas tone */
  --canvas-card:  #FFFFFF;   /* White cards for visual lift over canvas */
  --warm:         #EBE5D5;   /* Deeper warm surface, alternating section bg */
  --warm-deep:    #DDD5C1;   /* Darkest warm tone, borders on warm sections */

  /* Lines & dividers */
  --line:         #E5DFD0;   /* Default border colour, blends with canvas */
  --line-soft:    #EDE9DD;   /* Softer dividers, inside cards */

  /* Highlight */
  --highlight:    #F5E663;   /* Yellow — H1 highlight rectangle. Strict rules apply. */

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */

  --font-sans:    'Diatype', system-ui, -apple-system, sans-serif;
  --font-serif:   'Reckless', Georgia, serif;

  /* Type scale documented in DESIGN-SYSTEM.md. CSS uses raw values
     inside components rather than scale variables, because every
     scale step pairs a size with a specific line-height and tracking. */

  /* -----------------------------------------------------------
     SPACING & LAYOUT
     ----------------------------------------------------------- */

  /* Base spacing unit: 8px. All paddings, margins, gaps should
     be multiples of this. Do not use arbitrary spacing values. */

  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-15: 120px;  /* Standard section padding (desktop) */

  /* Section padding: 120px desktop, 80px mobile. Applied via media query. */

  /* Container widths */
  --container:        1200px;
  --container-narrow: 880px;   /* For long-form text columns */

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */

  --r:    12px;   /* Default card radius */
  --r-sm: 8px;    /* Buttons, inputs, small UI */
  --r-md: 12px;   /* Medium cards — alias of --r */
  --r-lg: 16px;   /* Large containers, hero cards, environmental bands */

  /* -----------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------- */

  --shadow-card:  0 2px 8px rgba(15,18,30,0.05),
                  0 14px 34px -12px rgba(15,18,30,0.10);
  --shadow-lift:  0 4px 14px rgba(15,18,30,0.06),
                  0 20px 50px -16px rgba(15,18,30,0.14);
}