/* Kettal design tokens. Source of truth: ../DESIGN.md (system 3 of 10).
   White gallery page, ink bands, one indigo accent. No gold, no blur shadows. */

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/urbanist-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: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmserifdisplay-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;
}

:root {
  /* color */
  --k-bg: #FFFFFF;
  --k-ink: #111111;
  --k-on-ink: #FFFFFF;
  --k-on-ink-muted: #A3A3A3;
  --k-text-2: #3D3D3D;
  --k-muted: #6A6A6A;
  --k-studio: #F2F2F2;
  --k-rule: #111111;
  --k-primary: #2F2A74;
  --k-on-primary: #FFFFFF;
  --k-tint: #E6E4F5;
  --k-primary-on-ink: #B9B4F2;
  --k-error: #B3261E;

  /* type */
  --k-sans: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --k-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --k-display-xl: clamp(64px, 14.2vw, 176px);
  --k-headline-lg: clamp(44px, 7.4vw, 88px);
  --k-headline-md: clamp(32px, 4.2vw, 48px);
  --k-title-md: 22px;
  --k-accent-serif: clamp(28px, 3.4vw, 40px);
  --k-body-lg: clamp(18px, 1.7vw, 20px);
  --k-body-md: 17px;
  --k-body-sm: 14px;
  --k-label: 12px;
  --k-track-display: -0.04em;
  --k-track-label: 0.08em;

  /* space */
  --k-unit: 4px;
  --k-container: 1200px;
  --k-text: 640px;
  --k-gutter: 16px;
  --k-rule-w: 2px;
  --k-header-h: 64px;
  --k-section: 56px;
  --k-slant: 56px;

  /* motion */
  --k-fast: 180ms;
  --k-mid: 320ms;
  --k-slow: 620ms;
  --k-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 600px) {
  :root { --k-gutter: 24px; --k-section: 88px; }
}

@media (min-width: 900px) {
  :root { --k-gutter: 32px; --k-section: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --k-fast: 0ms; --k-mid: 0ms; --k-slow: 0ms; }
}