/* EXIT foundation — design/foundation/ (V3)
   One palette for the public site, the member client, and sign-in: paper
   and ink. Every neutral is mixed at the paper's hue (OKLCH 91°).
   Light is the :root sheet. Dark (html[data-theme="dark"]) keeps the same
   structure and swaps surface, text, line, and danger. Token names match the
   sheet's variables. One family, Barlow, in three widths: Condensed for
   display, Semi Condensed for the interface and figures, Barlow for reading.
   IBM Plex Mono only for codes and machine IDs. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/fonts/barlow-semi-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --surface: #f9f7f1;
  --surface-subtle: #f0ede5;
  --surface-strong: #181713;
  --text: #181713;
  --text-muted: #6f6b61;
  --text-inverse: #f9f7f1;
  --line: #e3dfd5;
  --line-strong: #a8a49a;
  --danger: #c2361c;
  --danger-soft: #fae9e3;
  --text-faint: #a19d93;
  --on-danger: #f9f7f1;
  --knob-off: #fffdf8;

  /* Interaction fills. Pressed keeps the hover fill except on primary. */
  --primary-hover: color-mix(in srgb, var(--surface-strong) 88%, var(--surface));
  --primary-press: color-mix(in srgb, var(--surface-strong) 80%, var(--surface));
  --secondary-hover: color-mix(in srgb, var(--surface-subtle) 82%, var(--text));
  --danger-hover: color-mix(in srgb, var(--danger) 88%, #000);

  --bg: var(--surface);
  --bg-page: var(--surface);
  --bg-raised: var(--surface);
  --paper: var(--surface);
  --fg: var(--text);
  --fg-1: var(--text);
  --fg-2: var(--text-muted);
  --fg-3: var(--text-faint);
  --muted: var(--text-muted);
  --focus: var(--text);

  --ink-900: #181713;
  --ink-800: #26241f;
  --ink-700: #424039;
  --ink-600: #55534c;
  --ink-500: #6f6b61;
  --ink-400: #a8a49a;
  --ink-300: #d7d4cc;
  --ink-200: #e3dfd5;
  --ink-100: #f0ede5;
  --ink-050: #f9f7f1;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-copy: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-ui);
  /* Figures (numbers, dates, money) are the interface face with
     font-variant-numeric: tabular-nums, so columns align. */
  --font-figures: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-label: 14px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-title: 30px;
  --fs-2xl: 40px;
  --fs-3xl: 48px;
  --lh: 1.5;
  --leading-none: 1;
  --leading-display: 1;
  --leading-title: 1.15;
  --leading-tight: 1.2;
  --leading-heading: 1.25;
  --leading-mono: 1.4;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 600;

  --sp-1: 4px;
  --sp-2: 8px;
  --field-gap: 7px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius: 6px;
  --radius-badge: 12px;
  --radius-check: 4px;
  --radius-panel: 10px;
  --radius-pill: 12px;
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --border-hairline: 1px solid var(--line);
  --hairline: var(--line);
  --hairline-strong: var(--line-strong);

  /* Caps classify (badges, column heads, eyebrows) and carry this tracking. */
  --track-caps: 0.12em;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --hover-opacity: 0.92;
  --press-opacity: 0.84;
  --maxw: 980px;

  /* shadcn semantic aliases. --border stays the 1px rule the app already uses. */
  --background: var(--surface);
  --foreground: var(--text);
  --primary: var(--surface-strong);
  --primary-foreground: var(--text-inverse);
  --secondary: var(--surface-subtle);
  --secondary-foreground: var(--text);
  --accent: var(--surface-subtle);
  --accent-foreground: var(--text);
  --destructive: var(--danger);
  --destructive-foreground: var(--on-danger);
  --input: var(--line);
  --ring: var(--text);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --surface: #12100d;
  --surface-subtle: #1d1c18;
  --surface-strong: #eeebe2;
  --text: #eeebe2;
  --text-muted: #a8a49a;
  --text-inverse: #12100d;
  --line: #2f2d28;
  --line-strong: #a8a49a;
  --text-faint: #6c6960;
  /* Danger lifts on the dark page (the light red is 3.5:1 there). */
  --danger: #e0573d;
  --danger-soft: #2e1610;
  --on-danger: #12100d;

  --ink-900: #eeebe2;
  --ink-800: #e7e4dc;
  --ink-700: #d7d4cc;
  --ink-600: #a8a49a;
  --ink-500: #6c6960;
  --ink-400: #55534c;
  --ink-300: #424039;
  --ink-200: #2f2d28;
  --ink-100: #1d1c18;
  --ink-050: #12100d;

  scrollbar-color: #424039 var(--surface);
}

html {
  scrollbar-color: var(--line-strong) var(--surface);
}

::selection {
  background: var(--fg);
  color: var(--paper);
}