/* ==========================================================================
   tokens.css — design tokens + self-hosted font-face declarations
   Michael Znachonok engineering portfolio. Load order: tokens -> base -> components.
   No framework, no remote imports. All colour pairs verified in tools/contrast.py.
   ========================================================================== */

/* ---- Fonts (IBM Plex, OFL-licensed, self-hosted, see fonts/OFL.txt) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand ---- */
  --black: #0A0B0A;
  --ink-900: #131614;
  --line: #252A27;
  --white: #F4F5F2;
  --muted: #A3ABA6;
  --pine: #1E7A4D;
  --pine-deep: #0C3B24;
  --pine-bright: #5FBF7F;

  /* ---- Light reading surface (verified with the contrast checker) ---- */
  --paper: #F2F0E7;        /* off-white case-study reading background */
  --paper-2: #E8E4D6;      /* slightly darker panel bg on light, e.g. summary box */
  --ink: #111310;          /* body text on paper, near-black */
  --ink-muted: #52564E;    /* secondary text on paper */
  --line-light: #D9D4C4;   /* 1px rules on paper (decorative only, not used to convey meaning) */
  --pine-text: #15683F;    /* pine link/accent text on paper — darkened from --pine so it
                               clears 4.5:1 on BOTH --paper (5.09:1) and --paper-2 (4.57:1);
                               --pine itself only reaches 4.16:1 on --paper-2, so it is not reused
                               here. */

  /* ---- CAD viewport ---- */
  --slate: #2E3440;        /* CAD viewport panel (matches baked-in render background) */
  --slate-line: #7E86A0;   /* frame border — 3.45:1 on --slate (was #4A5163 at 1.58:1, failed
                               the 3:1 UI-boundary check) */
  --slate-muted: #AEB6C6;  /* caption text INSIDE a .cad-frame — 6.13:1 on --slate. The
                               surface --muted values do not apply here: on .surface-light the
                               caption would inherit --ink-muted at 1.67:1 on slate (fails AA). */
  --slate-label: #F4F5F2;  /* corner label text on slate — 11.41:1 */

  /* ---- Status badges: dark-surface colours (pass 4.5:1 on --black and --ink-900) ---- */
  --badge-flight: #5FBF7F;
  --badge-printed: #B8862E;
  --badge-rnd: #5B8DEF;
  --badge-concept: #9C8FD1;
  --badge-client: #C9A227;
  /* Light-surface variants: the dark-surface hues above drop under 3:1 on --paper/--paper-2,
     so components.css swaps to these inside .surface-light (each passes >=4.5:1 on both). */
  --badge-flight-light: #2F6B47;
  --badge-printed-light: #825F20;
  --badge-rnd-light: #4064A9;
  --badge-concept-light: #685F8C;
  --badge-client-light: #7A6217;

  /* ---- Type ---- */
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Fluid type scale — clamp(min, preferred, max), mobile-first */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.06rem + 0.45vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --step-4:  clamp(2.2rem, 1.65rem + 2.4vw, 3rem);
  --step-5:  clamp(2.6rem, 1.85rem + 3.4vw, 4.1rem);

  /* ---- Space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --space-8: 5.5rem;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-reading: 960px;
  --measure: 68ch;
  --radius: 2px; /* engineering feel: near-square corners everywhere */

  /* ---- Placeholder toggle: THE single documented switch ----
     Set to `none` to hide every photo placeholder site-wide (e.g. once real photos land). */
  --placeholder-display: block;

  /* ---- Semantic surface variables ----
     Consumed by every component; a surface class (.surface-black, .surface-ink,
     .surface-pine, .surface-light) overrides these. Root/body default = dark. */
  --surface-bg: var(--black);
  --surface-text: var(--white);
  --surface-muted: var(--muted);
  --surface-line: var(--line);
  --surface-link: var(--pine-bright);
  --surface-accent: var(--pine-bright);
}