/* KAVELA tokens. One paper, one ink, one grotesk. Three themes switch the pair; nothing else changes. */
:root {
  --paper: #EFE7DF;
  --ink: #6B1E2C;
  --ink-2: #8C7A74;
  --placeholder: #DDD2C8;
  --photo: #FFFFFF;
  --cursor: var(--ink);
  --cursor-text: var(--paper);

  --font: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font); --font-body: var(--font);

  /* Grid: fluid, 16 columns, 24px gutters, 24px margins (16 on mobile). */
  --margin: 24px; --gut: 24px; --block: 136px;

  /* Type scale (desktop). Display sizes track -0.025em, 800-weight statements -0.05em, text below 24px tracks normal. */
  --t-statement: 6vw; --t-mark: 12.75vw; --t-h1: 96px; --t-price: 48px; --t-cta: 36px; --t-ui: 24px; --t-card: 18px; --t-body: 16px; --t-foot: 14px; --t-meta: 12px; --t-tag: 11px;

  /* Motion: a few slow, strong curves. */
  --e-card: cubic-bezier(.87, 0, .13, 1);
  --e-hover: cubic-bezier(.16, 1, .3, 1); /* starts moving on the first frame */
  --e-link: cubic-bezier(.83, 0, .17, 1);
  --e-cta: cubic-bezier(.8, -.01, .34, 1.01);
  --e-wipe: cubic-bezier(.76, 0, .24, 1);
  --e-out: cubic-bezier(.19, 1, .22, 1);
  --e-io: cubic-bezier(.4, 0, .2, 1);
  --d-hover: 380ms; --d-wipe: 800ms; --d-out: 600ms;

  --header-h: 100px;

  /* Legacy aliases still referenced by WooCommerce overrides. */
  --background: var(--paper); --text1: var(--ink); --text2: var(--ink-2); --text3: var(--ink-2); --border: var(--ink);
  --burgundy: #6B1E2C; --cobalt: #1F3BE6; --kv-n-50: #FFFFFF; --kv-n-950: #181310;
  --r-tile: 0; --r-control: 0; --r-element: 0; --dur: 300ms; --ease: var(--e-io);
  color-scheme: light;
}
html[data-theme="murekkep"] { --ink: #181310; --ink-2: #6E655F; --placeholder: #DAD2CA; }
html[data-theme="gece"] { --paper: #6B1E2C; --ink: #EFE7DF; --ink-2: rgba(239, 231, 223, 0.62); --placeholder: #7E3542; --cursor-text: #6B1E2C; color-scheme: dark; }
html[data-theme="kobalt"] { --ink: #1F3BE6; --ink-2: #8A93BF; --placeholder: #DAD6D6; }
html[data-theme="lacivert"] { --paper: #1F3BE6; --ink: #EFE7DF; --ink-2: rgba(239, 231, 223, 0.66); --placeholder: #3A52EA; --cursor-text: #1F3BE6; color-scheme: dark; }
@media (max-width: 1023px) { :root { --margin: 16px; --gut: 16px; --header-h: 88px; --t-h1: 60px; --t-price: 36px; --t-ui: 16px; } }
@media (max-width: 767px) { :root { --t-statement: 44px; --block: 96px; } }