/* NosHost design tokens. Every color, space and radius used by the UI lives here.
   Themes: [data-theme="light"|"dark"] on <html>. Density: [data-density="compact"]. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 body */
  --fs-lg: 1.0625rem; /* 17 */
  --fs-xl: 1.25rem;   /* 20 */
  --fs-2xl: 1.625rem; /* 26 */
  --fs-3xl: 2.125rem; /* 34 */
  --lh-tight: 1.2;
  --lh-body: 1.6;

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Density-aware component sizes */
  --control-h: 40px;
  --control-h-sm: 32px;
  --card-pad: 18px;
  --row-pad: 12px;
  --gap: 16px;

  /* Shape */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* Layout */
  --header-h: 60px;
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 64px;
  --content-max: 1240px;
  --prose-max: 720px;

  /* Motion */
  --t-fast: 120ms;
  --t-med: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Light theme (default) */
  --bg: #f6f6f3;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f1ed;
  --surface-3: #e9e9e4;
  --border: #e1e1db;
  --border-strong: #c9c9c1;
  --input-border: #7a7f7a;
  --text: #16181b;
  --text-2: #3f434a;
  --muted: #5e636b;
  --accent: #0a6f93;          /* petrol blue, 5.6:1 on white */
  --accent-hover: #075b79;
  --accent-soft: #e3f1f6;
  --accent-text: #ffffff;
  --accent-ring: rgba(10, 111, 147, .45);
  --dot: rgba(22, 24, 27, .09);
  --code-bg: #f3f3ef;
  --code-text: #1d2024;
  --shadow-sm: 0 1px 2px rgba(20, 22, 25, .06);
  --shadow-md: 0 4px 16px rgba(20, 22, 25, .08), 0 1px 3px rgba(20, 22, 25, .06);
  --shadow-lg: 0 24px 64px rgba(20, 22, 25, .18), 0 4px 12px rgba(20, 22, 25, .08);
  --overlay: rgba(14, 16, 19, .45);

  /* Status: always paired with an icon and a text label */
  --pass: #157239;  --pass-soft: #e5f4ea;
  --warn: #965a03;  --warn-soft: #fbf1dc;
  --fail: #b42318;  --fail-soft: #fbe9e7;
  --info: #0a6f93;  --info-soft: #e3f1f6;
  --na: #5e636b;    --na-soft: #ececE8;

  /* Code tokens */
  --tok-key: #7a2fe0;
  --tok-str: #157239;
  --tok-num: #b45309;
  --tok-com: #5f646c;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0d0f12;
  --bg-elev: #14171b;
  --surface: #14171b;
  --surface-2: #1a1e23;
  --surface-3: #22272d;
  --border: #272c33;
  --border-strong: #3a414a;
  --input-border: #75808d;
  --text: #e9ebee;
  --text-2: #c4c8ce;
  --muted: #99a0aa;
  --accent: #4fc0e6;
  --accent-hover: #7fd3ef;
  --accent-soft: #10303c;
  --accent-text: #06202a;
  --accent-ring: rgba(79, 192, 230, .5);
  --dot: rgba(233, 235, 238, .07);
  --code-bg: #101317;
  --code-text: #dfe3e8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  --overlay: rgba(0, 0, 0, .6);

  --pass: #5bd38a;  --pass-soft: #11291b;
  --warn: #f2b84b;  --warn-soft: #2e2410;
  --fail: #ff8a80;  --fail-soft: #331614;
  --info: #4fc0e6;  --info-soft: #10303c;
  --na: #a3aab3;    --na-soft: #22272d;

  --tok-key: #c4a3ff;
  --tok-str: #8fe0a9;
  --tok-num: #f2b84b;
  --tok-com: #8a929c;

  color-scheme: dark;
}

[data-density="compact"] {
  --control-h: 34px;
  --control-h-sm: 28px;
  --card-pad: 12px;
  --row-pad: 8px;
  --gap: 10px;
  --fs-md: 0.875rem;
}