/* ==========================================================================
   Mizain web token sheet
   Source of truth: Mizain investor deck, September 2026.
   Contract file. Token names here are relied on by templates; do not rename.
   No JavaScript, no gradients, no images.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Subset to Latin + Latin Extended-A/B from the brand TTFs.
   Shipped: Manrope 400 / 700 / 800, JetBrains Mono 400 / 700.
   Manrope 500 and 600 and JetBrains Mono 500 are NOT in the brand font pack,
   so no face is declared for them. Per CSS font matching a request for 500
   resolves to 400 and a request for 600 resolves to 700. Prefer 400/700/800
   explicitly rather than relying on that.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Dark surfaces */
  --mz-ink: #1A1A1D;
  --mz-card-dark: #1C1B1F;
  --mz-card-dark-2: #232227;
  --mz-hairline-dark: #3A3940;

  /* Light surfaces */
  --mz-ground: #F6F5F3;
  --mz-card: #FFFFFF;
  --mz-border: #DDDAD3;

  /* Brand */
  --mz-plum: #5E2F52;
  --mz-plum-deep: #4A2542;
  --mz-mauve: #B896AC;
  --mz-lilac: #E9DEE5;
  --mz-lilac-2: #D6C4CE;

  /* Text */
  --mz-body: #47454C;
  --mz-muted: #726F69;        /* darkened from the deck 9A9792, see DESIGN-NOTES */
  --mz-body-on-dark: #CFCCC9;

  /* Additive, not part of the named contract: the deck muted grey, which is
     safe on ink but not on the light ground. Use only on dark surfaces. */
  --mz-muted-on-dark: #9A9792;

  /* Additive: the logo pack's letter colour on dark grounds. Slightly warmer
     and brighter than --mz-body-on-dark so the wordmark matches the supplied
     mizain-primary-dark artwork exactly. */
  --mz-wordmark-on-dark: #EDEBE7;

  /* Type families */
  --mz-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mz-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Fluid type scale, 360px viewport to 1440px viewport */
  --mz-fs-hero:    clamp(2.75rem,  1.8333rem + 4.074vw, 5.5rem);    /* 44 -> 88 */
  --mz-fs-h1:      clamp(2.25rem,  1.6667rem + 2.593vw, 4rem);      /* 36 -> 64 */
  --mz-fs-h2:      clamp(1.75rem,  1.4167rem + 1.481vw, 2.75rem);   /* 28 -> 44 */
  --mz-fs-h3:      clamp(1.25rem,  1.125rem  + 0.5556vw, 1.625rem); /* 20 -> 26 */
  --mz-fs-lead:    clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem); /* 18 -> 22 */
  --mz-fs-body:    clamp(1rem,     0.9583rem + 0.1852vw, 1.125rem); /* 16 -> 18 */
  --mz-fs-small:   clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);/* 14 -> 15 */
  --mz-fs-eyebrow: clamp(0.75rem,  0.7292rem + 0.0926vw, 0.8125rem);/* 12 -> 13 */

  /* Spacing steps */
  --mz-s1: 0.5rem;    /*  8px */
  --mz-s2: 1rem;      /* 16px */
  --mz-s3: 1.5rem;    /* 24px */
  --mz-s4: 2.5rem;    /* 40px */
  --mz-s5: 4rem;      /* 64px */
  --mz-s6: 6.5rem;    /* 104px */

  /* Geometry */
  --mz-radius: 14px;
  --mz-gap: var(--mz-s3);
  --mz-maxw: 1180px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mz-ground);
  color: var(--mz-body);
  font-family: var(--mz-font-sans);
  font-size: var(--mz-fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--mz-ink);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--mz-s3);
  text-wrap: balance;
}

h1 { font-size: var(--mz-fs-h1); }
h2 { font-size: var(--mz-fs-h2); }
h3 { font-size: var(--mz-fs-h3); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--mz-s3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--mz-plum); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--mz-plum-deep); }

code, kbd, samp, .mz-mono {
  font-family: var(--mz-font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum" 1;
}

.mz-hero-title { font-size: var(--mz-fs-hero); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.mz-lead  { font-size: var(--mz-fs-lead); line-height: 1.5; }
.mz-small { font-size: var(--mz-fs-small); }
.mz-num   { font-family: var(--mz-font-mono); font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.mz-container {
  width: 100%;
  max-width: var(--mz-maxw);
  margin-inline: auto;
  padding-inline: var(--mz-s3);
  box-sizing: border-box;
}

.mz-section {
  padding-block: var(--mz-s6);
  background: var(--mz-card);
  color: var(--mz-body);
}

.mz-section.is-ground {
  background: var(--mz-ground);
  color: var(--mz-body);
}

.mz-section.is-dark {
  background: var(--mz-ink);
  color: var(--mz-body-on-dark);
}

.mz-section.is-dark h1,
.mz-section.is-dark h2,
.mz-section.is-dark h3,
.mz-section.is-dark h4 { color: var(--mz-ground); }

.mz-section.is-dark a { color: var(--mz-mauve); }
.mz-section.is-dark a:hover { color: var(--mz-lilac); }

/* Grids. Collapse at 900px, then to a single column at 600px. */
.mz-grid-2, .mz-grid-3, .mz-grid-4 {
  display: grid;
  gap: var(--mz-gap);
  align-items: start;
}
.mz-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mz-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .mz-grid-3, .mz-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mz-grid-2, .mz-grid-3, .mz-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .mz-section { padding-block: var(--mz-s5); }
}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Eyebrow. Bold, uppercase, letter-spaced. Plum on light, mauve on dark. */
.mz-eyebrow {
  display: block;
  margin: 0 0 var(--mz-s2);
  font-family: var(--mz-font-sans);
  font-size: var(--mz-fs-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mz-plum);
}
.mz-eyebrow.on-dark,
.mz-section.is-dark .mz-eyebrow { color: var(--mz-mauve); }

/* A mono eyebrow, for numbered labels and code-like terms such as lam-density. */
.mz-eyebrow.is-mono { font-family: var(--mz-font-mono); font-weight: 700; letter-spacing: 0.1em; }

/* Wordmark. Lowercase "mizain" with the "ai" carrying the accent.
   Markup:
     <span class="mz-wordmark">miz<span class="ai">ai</span>n</span>

   Same construction as the logo pack: Manrope 800, natural tracking
   (the artwork sets letter-spacing 0, so do not tighten it here).
   Light ground: letters ink, "ai" plum.
   Dark ground:  letters EDEBE7, "ai" mauve.
   Where CSS text is not possible use design/logo-pack/*.svg, which is the
   same drawing converted to outlines. */
.mz-wordmark {
  display: inline-block;
  font-family: var(--mz-font-sans);
  font-weight: 800;
  font-size: var(--mz-fs-h3);
  line-height: 1;
  letter-spacing: 0;
  font-kerning: normal;
  text-transform: lowercase;
  color: var(--mz-ink);
  white-space: nowrap;
}
.mz-wordmark .ai { color: var(--mz-plum); }

.is-dark .mz-wordmark,
.on-dark .mz-wordmark,
.mz-section.is-dark .mz-wordmark,
.mz-wordmark.on-dark { color: var(--mz-wordmark-on-dark); }

.is-dark .mz-wordmark .ai,
.on-dark .mz-wordmark .ai,
.mz-section.is-dark .mz-wordmark .ai,
.mz-wordmark.on-dark .ai { color: var(--mz-mauve); }

/* Balance mark. Title and close surfaces only. Inherits currentColor. */
.mz-mark { display: block; width: 64px; height: 64px; color: var(--mz-mauve); }
.mz-mark svg { width: 100%; height: 100%; display: block; }

/* Buttons */
.mz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mz-s1);
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: calc(var(--mz-radius) - 6px);
  font-family: var(--mz-font-sans);
  font-size: var(--mz-fs-small);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* Primary. On light: ink ground, white label. On dark: mauve ground, ink label. */
.mz-btn-primary {
  background: var(--mz-ink);
  border-color: var(--mz-ink);
  color: #FFFFFF;
}
.mz-btn-primary:hover { background: #000000; border-color: #000000; color: #FFFFFF; }

.mz-btn-primary.on-dark,
.mz-section.is-dark .mz-btn-primary {
  background: var(--mz-mauve);
  border-color: var(--mz-mauve);
  color: var(--mz-ink);
}
.mz-btn-primary.on-dark:hover,
.mz-section.is-dark .mz-btn-primary:hover {
  background: var(--mz-lilac-2);
  border-color: var(--mz-lilac-2);
  color: var(--mz-ink);
}

/* Secondary. Outlined, transparent ground. */
.mz-btn-secondary {
  background: transparent;
  border-color: var(--mz-border);
  color: var(--mz-ink);
}
.mz-btn-secondary:hover { border-color: var(--mz-ink); color: var(--mz-ink); }

.mz-btn-secondary.on-dark,
.mz-section.is-dark .mz-btn-secondary {
  border-color: var(--mz-hairline-dark);
  color: var(--mz-body-on-dark);
}
.mz-btn-secondary.on-dark:hover,
.mz-section.is-dark .mz-btn-secondary:hover {
  border-color: var(--mz-mauve);
  color: var(--mz-ground);
}

/* Cards. Flat. A hairline, never a shadow. */
.mz-card {
  background: var(--mz-card);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  padding: var(--mz-s4);
  color: var(--mz-body);
}
.mz-card > :last-child { margin-bottom: 0; }

.mz-card.on-dark,
.mz-section.is-dark .mz-card {
  background: var(--mz-card-dark-2);
  border-color: var(--mz-hairline-dark);
  color: var(--mz-body-on-dark);
}
.mz-card.on-dark h1, .mz-card.on-dark h2, .mz-card.on-dark h3, .mz-card.on-dark h4,
.mz-section.is-dark .mz-card h1, .mz-section.is-dark .mz-card h2,
.mz-section.is-dark .mz-card h3, .mz-section.is-dark .mz-card h4 { color: var(--mz-ground); }

/* Tables. Plum header, per the deck. Wrap a wide table in .mz-table-wrap so it
   scrolls inside itself instead of pushing the page sideways on small screens. */
.mz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mz-table { width: 100%; border-collapse: collapse; font-size: var(--mz-fs-small); }
.mz-table th {
  background: var(--mz-plum);
  color: #FFFFFF;
  font-weight: 700;
  text-align: left;
  padding: var(--mz-s3) var(--mz-s2);
}
.mz-table td { padding: var(--mz-s3) var(--mz-s2); border-bottom: 1px solid var(--mz-border); vertical-align: top; }

/* Hairline rule */
.mz-rule { border: 0; border-top: 1px solid var(--mz-border); margin: var(--mz-s5) 0; }
.mz-section.is-dark .mz-rule { border-top-color: var(--mz-hairline-dark); }

/* --------------------------------------------------------------------------
   6. Focus and motion
   -------------------------------------------------------------------------- */

:where(a, button, .mz-btn, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mz-plum);
  outline-offset: 3px;
  border-radius: 4px;
}

.mz-section.is-dark :where(a, button, .mz-btn, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--mz-mauve);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}