/*
 * Marczell Klein design system: tokens.
 * The ONE custom-property file. Every page (main site, Partnership, product funnels) loads it first.
 * Spec: 02-design-plan.md section 1. Contrast notes are measured (WCAG 2.1):
 *   ink on bone 18.0, stone on bone 4.61 (AA), mist on ink 7.70, gold on ink 8.83, ink on gold 8.83,
 *   white on bronze 4.76 (AA), bronze on bone 4.32 (large text / UI only: 24px+), gold on bone 2.04 (never text).
 */

/* Fonts: self-hosted (no third-party request), variable. Inter carries the opsz axis: at display sizes the browser
   uses the Inter Display cuts automatically (font-optical-sizing: auto). Instrument Serif Italic is the one accent. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched local fallbacks: text keeps its size and line breaks while the web fonts load (no layout shift). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia");
  size-adjust: 88%;
  ascent-override: 98%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* ------------------------------------------------------------------ color (60 / 30 / 10) */
  --mk-ink: #0A0A0A;        /* dark sections, primary text on light */
  --mk-graphite: #1C1C1C;   /* raised surfaces on dark */
  --mk-stone: #6E6E73;      /* secondary text on light (AA on bone and white) */
  --mk-mist: #A1A1A6;       /* secondary text on dark */
  --mk-bone: #F5F4F1;       /* light sections */
  --mk-white: #FFFFFF;      /* cards on bone */
  --mk-gold: #C9A96A;       /* accent only: the one CTA, one rule, one number. Never text on light. <= 5% of a screen */
  --mk-bronze: #867044;     /* gold hover / pressed; gold-family text on light at 24px+ only */

  --mk-line-on-light: rgba(10, 10, 10, 0.12);
  --mk-line-on-dark: rgba(255, 255, 255, 0.14);
  --mk-scrim: rgba(10, 10, 10, 0.55);

  /* ------------------------------------------------------------------ type */
  --mk-font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mk-font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;

  /* 1.25 scale: 14 / 16 / 20 / 25 / 31 / 39 / 49 / 61 / 76 / 96 */
  --mk-step--1: 0.875rem;
  --mk-step-0: 1rem;
  --mk-step-1: 1.25rem;
  --mk-step-2: 1.5625rem;
  --mk-step-3: 1.953rem;
  --mk-step-4: 2.441rem;
  --mk-step-5: 3.052rem;
  --mk-step-6: 3.815rem;
  --mk-step-7: 4.768rem;
  --mk-step-8: 6rem;

  /* Fluid roles: each value moves along the scale between a 390px and a 1440px viewport. */
  --mk-text-caption: var(--mk-step--1);                                /* 14: legal, captions only */
  --mk-text-small: var(--mk-step-0);                                   /* 16: the minimum for reading text */
  --mk-text-body: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);     /* 18 -> 20 */
  --mk-text-lead: clamp(1.25rem, 1.1339rem + 0.4762vw, 1.5625rem);    /* 20 -> 25 */
  --mk-text-h4: clamp(1.25rem, 1.1339rem + 0.4762vw, 1.5625rem);      /* 20 -> 25 */
  --mk-text-h3: clamp(1.5625rem, 1.4232rem + 0.5714vw, 1.953rem);     /* 25 -> 31 */
  --mk-text-h2: clamp(1.953rem, 1.5196rem + 1.7143vw, 3.052rem);      /* 31 -> 49 */
  --mk-text-h1: clamp(2.441rem, 1.5786rem + 3.5238vw, 4.768rem);      /* 39 -> 76 */
  --mk-text-display: clamp(3.052rem, 1.9714rem + 4.4762vw, 6rem);     /* 49 -> 96 */

  --mk-weight-text: 400;
  --mk-weight-medium: 500;
  --mk-weight-head: 600;
  --mk-track-display: -0.03em;
  --mk-track-head: -0.022em;
  --mk-track-body: -0.01em;
  --mk-leading-head: 1.05;
  --mk-leading-tight: 1.2;
  --mk-leading-body: 1.5;
  --mk-measure: 66ch;          /* 60-72 characters */

  /* ------------------------------------------------------------------ space (8pt) */
  --mk-space-1: 8px;
  --mk-space-2: 16px;
  --mk-space-3: 24px;
  --mk-space-4: 32px;
  --mk-space-6: 48px;
  --mk-space-8: 64px;
  --mk-space-12: 96px;
  --mk-space-16: 128px;
  --mk-space-20: 160px;

  /* Section rhythm: 80-96 mobile, 128-160 desktop. */
  --mk-section-sm: clamp(64px, 52.11px + 3.048vw, 96px);    /* 64 -> 96  */
  --mk-section: clamp(88px, 67.2px + 5.333vw, 144px);       /* 88 -> 144 */
  --mk-section-lg: clamp(96px, 72.23px + 6.095vw, 160px);   /* 96 -> 160 */

  /* ------------------------------------------------------------------ grid */
  --mk-canvas: 1440px;          /* max canvas (full-bleed media) */
  --mk-content: 1200px;         /* content width */
  --mk-cols: 12;
  --mk-gutter: clamp(16px, 13.03px + 0.762vw, 24px);   /* 16 -> 24 */
  --mk-margin: clamp(16px, 4.2vw, 48px);               /* outer page margin */

  /* ------------------------------------------------------------------ shape, depth, motion */
  --mk-radius-s: 8px;
  --mk-radius-m: 16px;
  --mk-radius-l: 24px;
  --mk-radius-pill: 999px;
  --mk-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 12px 32px rgba(10, 10, 10, 0.07);
  --mk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mk-dur: 520ms;
  --mk-dur-fast: 180ms;
  --mk-rise: 20px;

  --mk-tap: 48px;               /* minimum touch target (Fitts) */
  --mk-header-h: 64px;
  --mk-z-sticky: 40;
  --mk-z-header: 50;
  --mk-z-sheet: 100;
}