/* MiTi, design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@400;600&family=Inter:wght@400;500;600;700&family=Ultra&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ed0f68;
  --color-accent-2: #fff200;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps, generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff1f3;
  --color-accent-200: #ffdde3;
  --color-accent-300: #ffbfca;
  --color-accent-400: #ff8ca6;
  --color-accent-500: #ff3a7d;
  --color-accent-600: #e5005f;
  --color-accent-700: #b40047;
  --color-accent-800: #800032;
  --color-accent-900: #500f22;

  --color-accent-2-100: #f6f6eb;
  --color-accent-2-200: #ebead0;
  --color-accent-2-300: #dad8a4;
  --color-accent-2-400: #c2bc57;
  --color-accent-2-500: #ab9c00;
  --color-accent-2-600: #8e7d00;
  --color-accent-2-700: #6e6000;
  --color-accent-2-800: #4e4400;
  --color-accent-2-900: #322d00;

  /* Three roles. Display (Ultra) is the logotype, one weight, used rarely and
     only where the brand mark itself speaks. Heading and body are the same
     grotesque (Inter) doing almost all the work. Secondary (Hepta Slab) is the
     contrast voice for subtitles, kickers, captions and table heads. */
  --font-display: "Ultra", Georgia, serif;
  --font-display-weight: 400;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;
  --font-secondary: "Hepta Slab", Georgia, serif;
  --font-secondary-weight: 400;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* Elevation, derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components, built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover:not(.btn) { color: var(--color-accent); text-decoration: underline; } /* plain text link: underline only, color holds */
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-family: var(--font-secondary); font-weight: var(--font-secondary-weight);
  font-size: 10px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* — the three type roles as utilities — */
.logotype {
  font-family: var(--font-display); font-weight: var(--font-display-weight); letter-spacing: 0;
  font-size: max(24px, 1em); /* Ultra's serifs mud together below 24px, the floor is enforced, not advised */
}
.subtitle {
  font-family: var(--font-secondary); font-weight: var(--font-secondary-weight);
  font-size: 18px; line-height: 1.35; letter-spacing: 0;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.eyebrow {
  font-family: var(--font-secondary); font-weight: 600;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.caption {
  font-family: var(--font-secondary); font-weight: var(--font-secondary-weight);
  font-size: 12px; line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px,
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 3px; } /* no tint behind text-only actions */
.btn-ghost:active { text-decoration: underline; opacity: 0.75; }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-ghost.btn-icon:hover { text-decoration: none; background: color-mix(in srgb, var(--color-accent) 10%, transparent); } /* a glyph has a shape, so it takes the tint */
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-family: var(--font-secondary); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 14px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  font-family: var(--font-secondary); font-weight: var(--font-secondary-weight);
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 10px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand { /* the one routine home for the display face: the wordmark */
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: 24px; /* the display face's 24px legibility floor, see the mobile block */ margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover { text-decoration: underline; text-underline-offset: 3px; } /* text link rule: underline, color holds */
.nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-family: var(--font-secondary); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Mobile type, one phone breakpoint, and only display type moves. Body and
   UI sizes never shrink (they grow, where iOS would otherwise zoom); the
   small steps rise to a 12px phone floor; the two non-body faces hold their
   own legibility floors. Sizes stay even, nothing drops below 10px.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  h1, h2, h3, h4, h5, h6 { line-height: 1.18; letter-spacing: -0.01em; } /* tight display tracking and leading hurt at phone sizes */
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  /* h5 (16px) and h6 (12px) already sit at the body/small steps, they hold */

  /* body and UI: 16px or up. Under 16px iOS auto-zooms a focused field, and
     the 44px hit target wants the taller line anyway. */
  .btn { font-size: 16px; min-height: 44px; }
  .input { font-size: 16px; min-height: 44px; }
  .radio, .seg-opt { font-size: 16px; }
  .seg-opt { padding: 10px 14px; }

  /* the 10px steps are desktop chrome; on a phone they rise to 12px */
  figcaption, .card-kicker, .tag { font-size: 12px; }
  .card-body, .card-meta, .dialog-body, .table { font-size: 14px; }

  /* secondary face: the slab's detail disappears below 14px */
  .subtitle { font-size: 16px; }
  .caption { font-size: 14px; }
  .eyebrow { font-size: 12px; } /* the exception, uppercase at 600 with 0.1em tracking holds */

  /* measure: copy clamps rather than running edge to edge */
  .subtitle, .caption, p { max-width: 34ch; }
}