/* KUDEN quiz design tokens. Fonts are self-hosted (same files as kuden.cz). */

/* Instrument Sans: text */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url(fonts/instrument-sans-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 Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url(fonts/instrument-sans-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; }
/* Plus Jakarta Sans: display / headings */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-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; }
/* JetBrains Mono: subset with digits, R, degree sign and comma only. Use for pure numerals (.k-num). */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/jetbrains-mono-koty.woff2) format('woff2'); }

:root {
  /* surfaces: warm near-black brand background */
  --bg: #161412;
  --bg-rgb: 22 20 18;
  --bg-2: #1c1a17;          /* raised panels, sheets */
  --bg-3: #24211d;          /* inputs, hover on raised */
  --surface: rgb(242 241 238 / 0.04);
  --surface-2: rgb(242 241 238 / 0.07);
  --surface-3: rgb(242 241 238 / 0.11);

  /* text */
  --ink: #f2f1ee;
  --ink-rgb: 242 241 238;
  --ink-2: #cdc9c2;         /* secondary text */
  --mute: #9c968d;          /* captions */
  --faint: #6f6a63;         /* disabled, placeholders on dark */

  /* lines */
  --line: rgb(242 241 238 / 0.09);
  --line-2: rgb(242 241 238 / 0.16);
  --line-3: rgb(242 241 238 / 0.26);

  /* brand blue */
  --core: #1a5cff;
  --core-rgb: 26 92 255;
  --core-hi: #5b8cff;
  --core-lo: #0b33b8;
  --core-fill: linear-gradient(160deg, #3d77ff 0%, #1a5cff 52%, #1249e0 100%);
  --core-glow: 0 10px 30px -10px rgb(var(--core-rgb) / 0.75), 0 0 0 1px rgb(120 160 255 / 0.35) inset;

  /* tones (findings, results) */
  --ok: #3ecf8e;   --ok-rgb: 62 207 142;
  --warn: #f2b24c; --warn-rgb: 242 178 76;
  --bad: #ff6a55;  --bad-rgb: 255 106 85;

  /* type */
  --f-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-hero: clamp(32px, 8.4vw, 44px);
  --t-q: clamp(26px, 6.6vw, 34px);       /* question title */
  --t-h2: clamp(21px, 5vw, 25px);
  --t-body: 17px;
  --t-sm: 15px;
  --t-xs: 13px;

  /* shape + space */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --col: 520px;             /* app column */
  --pad: clamp(18px, 5.2vw, 28px);
  --head-h: 60px;
  --tap: 48px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 160ms;
  --d: 280ms;
  --d-slow: 520ms;

  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 30px -18px rgb(0 0 0 / 0.7);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 24px 60px -24px rgb(0 0 0 / 0.85);

  color-scheme: dark;
}