/* ==========================================================================
   marketing-tokens.css — design tokens for the Guru-Site redesign (teal era)
   Source of truth: Figma "Guru – Done Assets" (JGllwSip1fBGRJVB6xkVKp),
   extracted 2026-07-02 → docs/design/figma-intake/done-assets-tokens.md
   Teal confirmed canonical by Scott (review 2669b1dc); purple annotations in
   the Figma file are stale.
   ========================================================================== */

/* --- Aspekta (OFL-1.1, self-hosted: static/fonts/aspekta/) --------------- */
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-450.woff2') format('woff2');
  font-weight: 450; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-550.woff2') format('woff2');
  font-weight: 550; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta/Aspekta-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Brand (teal) ------------------------------------------------------ */
  --mk-primary: #72a6ab;            /* buttons, links, accents */
  --mk-primary-hover: #588e93;
  --mk-primary-pressed: #456f73;
  --mk-primary-disabled: rgba(114, 166, 171, 0.3);
  --mk-primary-loading: rgba(114, 166, 171, 0.8);
  --mk-primary-tint: #d2e3e4;       /* secondary pressed fill, subtle washes */
  --mk-logo-teal: #70a0a8;          /* logo mark reference */
  --mk-contrast: #111111;           /* high-contrast brand dark */
  /* Brand gradient: teal-era proposal A (45° teal → azure), sent to Peace as
     option A in review 88b337a8 alongside option B (45° #456F73 → #9FD4DA).
     He hasn't picked yet — A ships as the working default; swapping to B (or
     his own stops) is a one-line change here. Usage per style guide: borders
     and shadows, never text fills. */
  --mk-gradient: linear-gradient(45deg, #72a6ab 0%, #47b8ff 100%);

  /* --- Elevation (comp's signature hard-offset shadows, visual QA P5) ----- */
  --mk-shadow-card: 4px 4px 0 rgba(46, 53, 56, 0.1);
  --mk-shadow-card-hover: 6px 6px 0 rgba(46, 53, 56, 0.14);
  --mk-shadow-panel: 8px 10px 0 -2px rgba(114, 166, 171, 0.5);

  /* --- Neutrals (light theme) -------------------------------------------- */
  --mk-heading: #3d3d3d;
  --mk-body: #525252;
  --mk-secondary: #737373;
  --mk-disabled: #808080;
  --mk-bg: #f7f6f2;                 /* page background */
  --mk-surface: #ffffff;            /* cards / elevated surfaces */
  --mk-border: #e0e3de;             /* low-contrast borders */

  /* --- Typography (Aspekta) ---------------------------------------------- */
  --mk-font: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --mk-display-size: 50px;  --mk-display-weight: 550; --mk-display-lh: 1.2;
  --mk-h1-size: 32px;       --mk-h1-weight: 500;      --mk-h1-lh: 1.2;
  --mk-h2-size: 16px;       --mk-h2-weight: 700;      --mk-h2-lh: 1.3;
  --mk-para-size: 16px;     --mk-para-weight: 400;    --mk-para-lh: 1.5;
  --mk-para-s-size: 14px;   --mk-para-s-weight: 400;  --mk-para-s-lh: 1.5;
  --mk-caption-size: 12px;  --mk-caption-weight: 400; --mk-caption-lh: 1.4;
  --mk-button-size: 14px;   --mk-button-weight: 500;  --mk-button-lh: 1.2;

  /* --- Spacing (Figma variables + ramp) ----------------------------------- */
  --mk-space-xs: 4px;
  --mk-space-sm: 8px;    /* Figma spacing-md */
  --mk-space-md: 16px;
  --mk-space-lg: 24px;
  --mk-space-xl: 32px;
  --mk-space-2xl: 48px;  /* Figma spacing-6xl */
  --mk-space-3xl: 64px;
  --mk-space-4xl: 120px; /* section gutters in comps */

  /* --- Radii --------------------------------------------------------------- */
  --mk-radius-btn: 6px;
  --mk-radius-card: 10px;
}