/* =============================================================================
   KlariVis web — shared design system.
   The single source of truth for tokens, type roles, and the button + link
   components, extracted from the homepage so every page speaks one language.
   Load this BEFORE any page stylesheet (home.css, calc.css). Page stylesheets
   own layout only; this file owns the system.
   ========================================================================== */

/* All three faces self-hosted (no external font CDN): Gilroy (display, .otf),
   Inter (body) and JetBrains Mono (mono) as latin-subset woff2. */
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Medium.otf')    format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-SemiBold.otf')  format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Bold.otf')      format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ---- color roles (canonical) ---- */
  --plum:  #3F0047;   /* deep brand ink + dark surface */
  --cyan:  #1FB7C9;   /* primary accent: action, data highlight, live */
  --mauve: #B88CAC;   /* soft captions, dividers, tertiary at rest on dark */
  --lede:  #E4D6E0;   /* lede paragraphs on dark */
  --cream: #F3E9F0;   /* light text on dark surfaces */
  --bone:  #F9F6F2;   /* warm off-white page surface */

  /* ---- type roles ---- */
  --font-display: 'Gilroy', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- layout + motion ---- */
  --wrap: 1264px;
  --pad: 88px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* =============================================================== type ===== */
/* Display headline (H1 signature): the palindrome gradient in the tesseract
   palette, drifting almost imperceptibly on hover like slow clouds, freezing
   on leave. Pages set the size; this owns the treatment. Padding-bottom keeps
   descenders (the j in "journey") inside the background-clip:text box. */
.t-display {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.0;
  padding-bottom: .1em;
  background: linear-gradient(94deg, #1FB7C9 0%, #B88CAC 26%, #FFFFFF 50%, #B88CAC 74%, #1FB7C9 100%);
  background-size: 200% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: displayDrift 30s linear infinite alternate;
  animation-play-state: paused;
}
.t-display:hover { animation-play-state: running; }
@keyframes displayDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ============================================================ buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 1px solid transparent; border-radius: 999px;
  padding: 17px 30px; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: transform .13s var(--ease-out), box-shadow .26s ease, filter .2s ease,
              background .26s ease, color .26s ease, border-color .26s ease;
}
.btn--sm { padding: 12px 20px; font-size: 14px; }
.btn:not(:disabled):active { transform: translateY(1px) scale(.985); }
.btn:disabled { cursor: default; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* primary: cyan fill. Same on light and dark surfaces. */
.btn--primary { background: var(--cyan); color: var(--plum); }
.btn--primary:not(:disabled):hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 34px -16px rgba(31,183,201,.75); }
/* disabled: clearly inactive, no full-saturation accent */
.btn--primary:disabled { background: #E4DCE2; color: rgba(63,0,71,.42); box-shadow: none; }
[data-scheme="dark"] .btn--primary:disabled { background: rgba(243,233,240,.16); color: rgba(243,233,240,.4); }

/* secondary: outline. Ink on light surfaces; inverts to cream on dark. */
.btn--secondary { background: transparent; color: var(--plum); border-color: rgba(63,0,71,.28); }
.btn--secondary:not(:disabled):hover { border-color: var(--plum); background: rgba(63,0,71,.05); transform: translateY(-1px); }
.btn--secondary:disabled { color: rgba(63,0,71,.4); border-color: rgba(63,0,71,.14); }
[data-scheme="dark"] .btn--secondary { color: var(--cream); border-color: rgba(184,140,172,.6); }
[data-scheme="dark"] .btn--secondary:hover { border-color: var(--mauve); background: rgba(243,233,240,.06); }

/* ====================================================== tertiary link ===== */
/* Text link with a chevron. On hover the label underline wipes in, the color
   warms to cyan, and the chevron nudges forward. Ink on light, mauve on dark.
   Wrap the text in .link-cta__label; the chevron is drawn by ::after. */
.link-cta {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  color: var(--plum); cursor: pointer; transition: color .28s ease;
}
[data-scheme="dark"] .link-cta { color: var(--mauve); }
.link-cta__label {
  padding-bottom: 2px;
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .34s var(--ease-out);
}
.link-cta::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M6%203l5%205-5%205'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M6%203l5%205-5%205'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .28s var(--ease-out);
}
.link-cta:hover { color: var(--cyan); }
.link-cta:hover .link-cta__label { background-size: 100% 1px; }
.link-cta:hover::after { transform: translateX(3px); }
.link-cta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .t-display { animation: none; }
  .link-cta::after { transition: none; }
}