/* Kliento design tokens ("Ink"). One source for the website, the portal, the board page and staff emails.
   Rules and usage: brand/DESIGN.md. Change a value here, never copy it into another file. */

@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/brand/fonts/dm-sans-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(/brand/fonts/dm-sans-latin-italic.woff2) format("woff2")}

:root{
  /* color: monochrome brand, no accent */
  --k-paper:#F4F4F3;      /* page background */
  --k-surface:#FFFFFF;    /* cards, inputs, menus */
  --k-sunken:#EAEAE8;     /* chat bubbles, quiet fills, table stripes */
  --k-ink:#111111;        /* text, primary buttons, strong rules */
  --k-ink-2:#2E2E2E;      /* body text on paper */
  --k-mute:#5F5F5F;       /* secondary text, captions (5.9:1 on paper) */
  --k-hair:#E1E1DE;       /* hairline dividers */
  --k-hair-2:#CFCFCB;     /* quiet outlines, never the only edge of a control */
  --k-field:#858581;      /* input and checkbox borders (3.7:1 on white) */
  --k-on-ink:#F4F4F3;     /* text on ink fills */
  --k-on-ink-mute:#CFCFCF;

  /* status, for app surfaces only (portal, board, emails). The marketing site stays monochrome. */
  --k-ok:#1E7B3A;   --k-ok-tint:#E7F3EA;
  --k-warn:#9A5B00; --k-warn-tint:#FBF0DF;
  --k-bad:#B3261E;  --k-bad-tint:#FBE9E7;
  --k-info:#2B4FB8; --k-info-tint:#E8EDFA;

  /* type */
  --k-font:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --k-fs-xs:12px; --k-fs-sm:14px; --k-fs-base:16px; --k-fs-md:17px; --k-fs-lg:19px; --k-fs-xl:22px;
  --k-fs-2xl:28px; --k-fs-3xl:clamp(28px,3vw,36px); --k-fs-4xl:clamp(32px,3.6vw,52px); --k-fs-display:clamp(42px,5vw,72px);
  --k-fw-body:400; --k-fw-medium:500; --k-fw-strong:600; --k-fw-bold:700;
  --k-lh-tight:1.06; --k-lh-snug:1.2; --k-lh-body:1.55;
  --k-track-head:-.015em; --k-track-label:.06em;

  /* space (4px base) */
  --k-1:4px; --k-2:8px; --k-3:12px; --k-4:16px; --k-5:20px; --k-6:24px; --k-8:32px; --k-10:40px; --k-12:48px; --k-16:64px; --k-24:96px;
  --k-gutter:clamp(20px,3.2vw,44px); --k-max:1320px; --k-section:clamp(80px,9vw,140px);

  /* shape */
  --k-r-sm:8px;   /* inputs, small chips */
  --k-r-md:14px;  /* small cards, menus */
  --k-r-lg:22px;  /* cards, media, panels */
  --k-r-pill:999px; /* every button */
  --k-border:2px solid var(--k-ink);       /* brand outline: secondary buttons, feature cards */
  --k-border-hair:1px solid var(--k-hair); /* quiet dividers */

  /* elevation, tinted to ink, never pure black */
  --k-shadow-1:0 1px 2px rgba(17,17,17,.06);
  --k-shadow-2:0 12px 32px -16px rgba(17,17,17,.28);
  --k-shadow-3:0 24px 48px -24px rgba(17,17,17,.45);

  /* motion */
  --k-ease-out:cubic-bezier(.22,1,.36,1);
  --k-ease-in-out:cubic-bezier(.65,0,.35,1);
  --k-dur-1:150ms; /* hover, press */
  --k-dur-2:220ms; /* menus, tabs */
  --k-dur-3:400ms; /* small reveals */
  --k-dur-4:700ms; /* section reveals */

  --k-focus:0 0 0 3px var(--k-paper),0 0 0 5px var(--k-ink);
  color-scheme:light;
}

/* Dark theme for app surfaces (portal). Opt in with data-theme="dark" on <html>. The public site stays light. */
[data-theme="dark"]{
  --k-paper:#111214; --k-surface:#1A1B1E; --k-sunken:#232428;
  --k-ink:#F2F2F0; --k-ink-2:#D6D6D3; --k-mute:#9C9C99;
  --k-hair:#2C2D31; --k-hair-2:#3A3B40; --k-field:#6E6F74; --k-on-ink:#111214; --k-on-ink-mute:#3A3B40;
  --k-ok:#5BC77A; --k-ok-tint:#16281C; --k-warn:#E3A541; --k-warn-tint:#2D2312;
  --k-bad:#F07167; --k-bad-tint:#2E1715; --k-info:#7D9BF0; --k-info-tint:#18203A;
  --k-shadow-2:0 12px 32px -16px rgba(0,0,0,.7); --k-shadow-3:0 24px 48px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{--k-dur-1:0ms;--k-dur-2:0ms;--k-dur-3:0ms;--k-dur-4:0ms}
}