/* ============================================================
   Klasa w chmurze: design tokens
   Single source of the visual system. Nothing outside this file
   introduces a new color, size, radius or duration.
   ============================================================ */

/* ---- Fonts (self-hosted, latin + latin-ext) ---- */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  /* ---- Type families ---- */
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* ---- Surfaces ---- */
  --surface-paper: #f6f5f1;
  --surface-technical: #eceae3;
  --surface-graphite: #1a1c1a;
  --surface-interactive: #fdfdfb;

  /* ---- Text (contrast on paper) ---- */
  --text-primary: #161816;            /* 16.4:1 */
  --text-secondary: #4a4d49;          /*  7.9:1 */
  --text-muted: #6c706a;              /*  4.6:1 */
  --text-inverse: #f2f1ec;            /* 15.2:1 on graphite */
  --text-inverse-secondary: #a8aca6;  /*  7.4:1 on graphite */

  /* ---- Lines ---- */
  --line-primary: #161816;
  --line-subtle: #d9d7ce;
  --line-sketch: rgba(22, 24, 22, 0.055);
  --line-sketch-label: rgba(22, 24, 22, 0.22);
  --line-inverse: rgba(242, 241, 236, 0.25);

  /* ---- Accent: muted technical green ---- */
  --accent-base: #2a6b66;             /* 5.7:1 on paper */
  --accent: var(--accent-base);
  --accent-hover: #1f5f5b;
  --accent-active: #174a46;
  --accent-on-dark: #7bb8b4;          /* 7.6:1 on graphite */
  --accent-wash: rgba(42, 107, 102, 0.08);

  /* ---- Case-study accents: restrained, technical, AA on paper ---- */
  --case-accent-teal: var(--accent-base);
  --case-accent-teal-wash: rgba(42, 107, 102, 0.08);
  --case-accent-blue: #3e5f83;         /* 6.1:1 on paper */
  --case-accent-blue-wash: rgba(62, 95, 131, 0.08);
  --case-accent-plum: #76536b;         /* 6.0:1 on paper */
  --case-accent-plum-wash: rgba(118, 83, 107, 0.08);
  --case-accent-ochre-wash: rgba(138, 106, 28, 0.08);

  /* ---- States ---- */
  --focus: #2a6b66;
  --success: #2a6b66;
  --warning: #8a6a1c;
  --error: #9b3b2e;

  /* ---- Spacing (name = px) ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --space-192: 192px;

  /* ---- Layout ---- */
  --content-max: 1280px;
  --gutter: clamp(16px, 2vw, 24px);
  --measure: 68ch;
  --section-pad: clamp(64px, 10vw, 160px);

  /* ---- Geometry ---- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --stroke-hair: 1px;
  --stroke-tech: 1.5px;
  --stroke-construction: 0.75px;
  --stroke-emph: 2px;
  --stroke-strong: 3px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-draw: 600ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Z-layers ---- */
  --z-sketch: 0;
  --z-content: 1;
  --z-header: 100;
  --z-nav-overlay: 200;
  --z-skip: 300;
}