/* ==========================================================================
   Mankai CRM Marketing - Design Tokens
   Color system: ink #182021 + blue #2449E8 + white + soft gray.
   Spacing, type scale, radius, and motion stay structural.
   Component styles must reference tokens, never hard-coded brand values.
   ========================================================================== */

/* ---- Fonts (self-hosted) ---- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Mankai palette ---- */
  --mk-ink: #182021;
  --mk-blue: #2449E8;
  --mk-blue-dark: #1635B5;
  --mk-white: #FFFFFF;
  --mk-soft: #F4F5F3;
  --mk-muted: #626968;
  --mk-line: #DEDFDB;
  --mk-pale-blue: #EDF0FD;
  --mk-muted-panel: #E5E9E3;
  --mk-dark-line: #46504B;
  --mk-dark-muted: #BBC5BF;
  --mk-dark-accent: #C8D2FF;
  --mk-image-border: #D4D8D8;

  /* ---- Surfaces ---- */
  --paper:        var(--mk-white);
  --paper-raised: var(--mk-white);
  --paper-sunken: var(--mk-soft);
  --paper-bright: var(--mk-white);
  --cream:        var(--mk-white);
  --mist:         var(--mk-soft);
  --blush:        var(--mk-soft);
  --sand:         var(--mk-soft);
  --stone:        var(--mk-line);

  /* ---- Ink ---- */
  --ink:          var(--mk-ink);
  --ink-soft:     var(--mk-muted);
  --ink-faint:    var(--mk-muted);
  --ink-muted:    var(--mk-muted);
  --ink-inverse:  var(--mk-white);
  --ink-on-light-soft:  var(--mk-muted);
  --ink-on-light-faint: var(--mk-muted);
  --line:         var(--mk-line);
  --line-strong:  var(--mk-line);
  --line-on-light: var(--mk-line);
  --line-on-light-strong: var(--mk-line);

  /* ---- Brand accent (blue; hover/pressed is darker) ---- */
  --accent:       var(--mk-blue-dark);
  --accent-deep:  var(--mk-blue);
  --accent-tint:  var(--mk-pale-blue);
  --accent-wash:  var(--mk-pale-blue);
  --olive:        var(--mk-muted);
  --gold:         var(--mk-muted);
  --gold-deep:    var(--mk-muted);
  --gold-tint:    var(--mk-soft);

  /* ---- Functional color (unchanged status hues) ---- */
  --leaf:         #2F9E5F;
  --leaf-deep:    #24824C;
  --leaf-tint:    #E6F4EB;
  --blue:         #4A6F8F;
  --blue-tint:    var(--mk-pale-blue);
  --warn:         #B8862E;
  --warn-tint:    #F7EFDC;
  --error:        #C84A42;
  --error-tint:   #F8E8E6;

  /* ---- Night (full-bleed ink bands / footer) ---- */
  --night:        var(--mk-ink);
  --night-raised: var(--mk-ink);
  --night-ink:    var(--mk-white);
  --night-soft:   var(--mk-dark-muted);
  --night-muted:  var(--mk-dark-muted);
  --night-faint:  var(--mk-dark-muted);
  --night-line:   var(--mk-dark-line);
  --night-text:   var(--mk-white);

  /* ---- Typography: Instrument Sans display; Inter UI; Mono metadata ---- */
  --font-display: 'Instrument Sans', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-sans-display: 'Instrument Sans', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-serif:   'Instrument Sans', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  --text-hero:    clamp(2.6rem, 5.4vw, 4.35rem);
  --text-h1:      clamp(2.3rem, 4.4vw, 3.4rem);
  --text-h2:      clamp(1.9rem, 3.4vw, 2.8rem);
  --text-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --text-h4:      1.125rem;
  --text-lede:    clamp(1.1rem, 1.5vw, 1.25rem);
  --text-body:    1.0625rem;
  --text-small:   0.9375rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;

  /* ---- Spacing (4px base) ---- */
  --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;

  --section-pad: clamp(72px, 8vw, 118px);
  --hero-pad: clamp(80px, 11vw, 148px);
  --block-gap: clamp(56px, 7vw, 96px);

  /* ---- Layout ---- */
  --page-gutter: clamp(20px, 3.2vw, 40px);
  --container:       min(1120px, calc(100% - (2 * var(--page-gutter))));
  --container-wide:  min(1240px, calc(100% - (2 * var(--page-gutter))));
  --container-prose: min(680px, calc(100% - (2 * var(--page-gutter))));
  --prose-max: 44rem;
  --header-h: 76px;
  --inset: clamp(8px, 1vw, 14px);
  --final-half: clamp(140px, 18vw, 210px);

  /* ---- Radii ---- */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-inset: clamp(16px, 2.4vw, 28px);
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgb(24 32 33 / 0.06);
  --shadow-s: 0 1px 3px rgb(24 32 33 / 0.08), 0 4px 14px -6px rgb(24 32 33 / 0.1);
  --shadow-m: 0 2px 10px -2px rgb(24 32 33 / 0.1), 0 14px 34px -14px rgb(24 32 33 / 0.14);
  --shadow-l: 0 4px 16px -4px rgb(24 32 33 / 0.12), 0 28px 64px -22px rgb(24 32 33 / 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 200ms;
  --reveal-duration: 700ms;
  --reveal-distance: 28px;
  --reveal-stagger: 100ms;
  --drift-duration: 7s;
}

@media (max-width: 1080px) {
  :root {
    --page-gutter: 20px;
  }
}

@media (max-width: 980px) {
  :root {
    --final-half: clamp(150px, 36vw, 190px);
  }
}

@media (max-width: 820px) {
  :root {
    --section-pad: var(--space-9);
    --hero-pad: var(--space-8);
    --block-gap: var(--space-8);
    --header-h: 60px;
    --page-gutter: 20px;
  }
}

@media (max-width: 640px) {
  :root {
    --final-half: clamp(120px, 34vw, 150px);
  }
}