/* Pico design tokens (Werkbank direction, PICO-141).
   Ported from the step 2 prototype (werkbank/tokens.css). Token names follow the prototype,
   so a second direction or a brand file only changes values, never names.
   Every colour, space, size and font in pico-components.css and pico-layout.css comes from here.
   Hex and rgb() colours are allowed in this file only (portal/scripts/ui-self-check.sh checks it).
   Sticker id: css-pico-tokens. Loaded first: it declares the cascade layer order. */

@layer pico.reset, pico.base, pico.components, pico.layout, pico.utilities;

/* Fonts: self-hosted, OFL (see /assets/fonts/LICENSE-OFL.txt), latin subset. No CDN. */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@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: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Type */
  --pico-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pico-font-heading: var(--pico-font-ui);
  --pico-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --pico-font-features: "cv11";

  --pico-text-xs: 0.75rem;     /* 12 */
  --pico-text-sm: 0.75rem;     /* 12 */
  --pico-text-base: 0.875rem;  /* 14 */
  --pico-text-lg: 1rem;        /* 16 */
  --pico-text-xl: 1.25rem;     /* 20 */
  --pico-text-2xl: 1.5rem;     /* 24 */
  --pico-text-3xl: 1.5rem;     /* 24: Werkbank caps the scale here */

  --pico-leading-tight: 1.25;
  --pico-leading-snug: 1.35;
  --pico-leading-base: 1.5;

  --pico-weight-regular: 400;
  --pico-weight-medium: 500;
  --pico-weight-semibold: 600;
  --pico-weight-heading: 600;
  --pico-tracking-tight: -0.011em;
  --pico-tracking-caps: 0.04em;

  /* Space: 4px grid */
  --pico-space-1: 0.25rem;  /* 4 */
  --pico-space-2: 0.5rem;   /* 8 */
  --pico-space-3: 0.75rem;  /* 12 */
  --pico-space-4: 1rem;     /* 16 */
  --pico-space-5: 1.5rem;   /* 24 */
  --pico-space-6: 2rem;     /* 32 */
  --pico-space-7: 3rem;     /* 48 */
  --pico-space-8: 4rem;     /* 64 */

  /* Radius */
  --pico-radius-sm: 4px;
  --pico-radius-md: 6px;
  --pico-radius-lg: 8px;
  --pico-radius-pill: 999px;

  /* Sizes */
  --pico-icon-size: 1rem;
  --pico-control-height: 2rem;      /* 32 */
  --pico-control-height-sm: 1.75rem;/* 28 */
  --pico-row-height: 2.25rem;       /* 36 */
  --pico-rail-width: 240px;
  --pico-rail-width-collapsed: 56px;
  --pico-split-list-width: 280px;
  --pico-drawer-width: 30rem;
  --pico-content-max: 1440px;
  --pico-form-max: 40rem;
  --pico-gutter: var(--pico-space-6);
  --pico-topbar-height: 3.25rem;     /* rail turns into a top bar below 800px */

  /* Colour: surfaces (cool slate neutrals) */
  --pico-color-bg: #ffffff;
  --pico-color-bg-subtle: #f7f8fa;
  --pico-color-bg-muted: #eef0f3;
  --pico-color-surface: #ffffff;
  --pico-color-surface-raised: #ffffff;
  --pico-color-surface-sunken: #f7f8fa;
  --pico-color-border: #e3e6eb;
  --pico-color-border-subtle: #eef0f3;
  --pico-color-border-strong: #cdd2da;
  --pico-color-overlay: rgb(15 23 41 / 0.32);
  --pico-color-overlay-light: rgb(15 23 41 / 0.16);
  --pico-color-on-solid: #ffffff;
  --pico-color-on-solid-subtle: rgb(255 255 255 / 0.16);

  /* Colour: text */
  --pico-color-text: #0f1729;
  --pico-color-text-muted: #525c6e;
  --pico-color-text-subtle: #7c8596;
  --pico-color-text-inverse: #ffffff;

  /* Colour: accent (Pico navy, alt-admin-theme #012e62 family) */
  --pico-color-accent: #0b3c7d;
  --pico-color-accent-hover: #082f63;
  --pico-color-accent-active: #06264f;
  --pico-color-accent-text: #1a55ad;
  --pico-color-accent-subtle: #eaf1fb;
  --pico-color-accent-contrast: #ffffff;
  --pico-color-focus: #2f6fe0;

  /* Colour: feedback */
  --pico-color-success: #177a3c;
  --pico-color-success-bg: #edf8f1;
  --pico-color-success-border: #bfe3cc;
  --pico-color-info: #1f55c0;
  --pico-color-info-bg: #eef4fe;
  --pico-color-info-border: #c9d9f6;
  --pico-color-warning: #8f5208;
  --pico-color-warning-bg: #fff7e6;
  --pico-color-warning-border: #f1d49b;
  --pico-color-danger: #b42318;
  --pico-color-danger-bg: #fef3f2;
  --pico-color-danger-border: #f5c6c1;
  --pico-color-danger-solid: #c8281c;
  --pico-color-danger-solid-hover: #a91f15;

  /* Colour: project states (saturated, used small, always next to a text label) */
  --pico-color-state-live: #18a04a;
  --pico-color-state-starting: #2f6fe0;
  --pico-color-state-reload: #e08b06;
  --pico-color-state-archived: #8a93a3;
  --pico-color-state-failed: #d92d20;
  --pico-color-state-down: #ea5a0c;
  --pico-color-state-unknown: #b4bac5;

  /* Colour: pending changes */
  --pico-color-change-new: var(--pico-color-success);
  --pico-color-change-new-bg: var(--pico-color-success-bg);
  --pico-color-change-changed: var(--pico-color-info);
  --pico-color-change-changed-bg: var(--pico-color-info-bg);
  --pico-color-change-removed: var(--pico-color-danger);
  --pico-color-change-removed-bg: var(--pico-color-danger-bg);

  /* Colour: code */
  --pico-color-code-bg: #0f1729;
  --pico-color-code-border: #0f1729;
  --pico-color-code-text: #e3e8f0;
  --pico-color-code-muted: #93a0b5;
  --pico-color-code-rule: rgb(255 255 255 / 0.08);
  --pico-color-code-secret: #f5c26b;
  --pico-color-code-success: #7ee2a1;
  --pico-color-highlight: #fff4d1;

  /* Elevation */
  --pico-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --pico-shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
  --pico-shadow-md: 0 10px 24px -6px rgb(16 24 40 / 0.14), 0 2px 6px rgb(16 24 40 / 0.05);
  --pico-shadow-lg: 0 24px 48px -12px rgb(16 24 40 / 0.28), 0 4px 12px rgb(16 24 40 / 0.06);
  --pico-shadow-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);

  --pico-focus-ring: 2px solid var(--pico-color-focus);
  --pico-focus-shadow: 0 0 0 3px rgb(47 111 224 / 0.22);

  /* Motion */
  --pico-duration-fast: 120ms;
  --pico-duration-base: 200ms;
  --pico-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layers */
  --pico-z-sticky: 20;
  --pico-z-menu: 40;
  --pico-z-drawer: 60;
  --pico-z-toast: 80;
}

/* Dark theme. data-theme="dark" forces it. data-theme="system" follows the OS. */
:root[data-theme="dark"] {
  --pico-color-bg: #0d1015;
  --pico-color-bg-subtle: #12161c;
  --pico-color-bg-muted: #1b2028;
  --pico-color-surface: #12161c;
  --pico-color-surface-raised: #181d25;
  --pico-color-surface-sunken: #0a0d11;
  --pico-color-border: #252b35;
  --pico-color-border-subtle: #1d222a;
  --pico-color-border-strong: #353d4a;
  --pico-color-overlay: rgb(0 0 0 / 0.55);
  --pico-color-overlay-light: rgb(0 0 0 / 0.35);

  --pico-color-text: #e7eaf0;
  --pico-color-text-muted: #a3abb9;
  --pico-color-text-subtle: #737c8c;
  --pico-color-text-inverse: #0d1015;

  --pico-color-accent: #3567c4;
  --pico-color-accent-hover: #2d5bb0;
  --pico-color-accent-active: #264f9c;
  --pico-color-accent-text: #8cb4ff;
  --pico-color-accent-subtle: #172338;
  --pico-color-accent-contrast: #ffffff;
  --pico-color-focus: #6ea0ff;

  --pico-color-success: #57d08a;
  --pico-color-success-bg: #0f2419;
  --pico-color-success-border: #1f4d33;
  --pico-color-info: #8cb4ff;
  --pico-color-info-bg: #111d33;
  --pico-color-info-border: #243d69;
  --pico-color-warning: #f2b552;
  --pico-color-warning-bg: #261b08;
  --pico-color-warning-border: #573f14;
  --pico-color-danger: #ff8a7e;
  --pico-color-danger-bg: #2a1311;
  --pico-color-danger-border: #5c2621;
  --pico-color-danger-solid: #d63b2f;
  --pico-color-danger-solid-hover: #bf3227;

  --pico-color-state-live: #3ccf6e;
  --pico-color-state-starting: #6ea0ff;
  --pico-color-state-reload: #f0a73a;
  --pico-color-state-archived: #7b8494;
  --pico-color-state-failed: #ff5a4e;
  --pico-color-state-down: #ff7d3f;
  --pico-color-state-unknown: #5a6272;

  --pico-color-code-bg: #0a0d11;
  --pico-color-code-border: #252b35;
  --pico-color-code-text: #dfe4ec;
  --pico-color-code-muted: #8a94a6;
  --pico-color-highlight: #2a2410;

  --pico-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --pico-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  --pico-shadow-md: 0 12px 28px -6px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.03);
  --pico-shadow-lg: 0 24px 56px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.04);
  --pico-shadow-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --pico-focus-shadow: 0 0 0 3px rgb(110 160 255 / 0.25);
}

/* Same values when appearance is System and the OS is dark. Keep in step with the block above. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
  --pico-color-bg: #0d1015;
  --pico-color-bg-subtle: #12161c;
  --pico-color-bg-muted: #1b2028;
  --pico-color-surface: #12161c;
  --pico-color-surface-raised: #181d25;
  --pico-color-surface-sunken: #0a0d11;
  --pico-color-border: #252b35;
  --pico-color-border-subtle: #1d222a;
  --pico-color-border-strong: #353d4a;
  --pico-color-overlay: rgb(0 0 0 / 0.55);
  --pico-color-overlay-light: rgb(0 0 0 / 0.35);

  --pico-color-text: #e7eaf0;
  --pico-color-text-muted: #a3abb9;
  --pico-color-text-subtle: #737c8c;
  --pico-color-text-inverse: #0d1015;

  --pico-color-accent: #3567c4;
  --pico-color-accent-hover: #2d5bb0;
  --pico-color-accent-active: #264f9c;
  --pico-color-accent-text: #8cb4ff;
  --pico-color-accent-subtle: #172338;
  --pico-color-accent-contrast: #ffffff;
  --pico-color-focus: #6ea0ff;

  --pico-color-success: #57d08a;
  --pico-color-success-bg: #0f2419;
  --pico-color-success-border: #1f4d33;
  --pico-color-info: #8cb4ff;
  --pico-color-info-bg: #111d33;
  --pico-color-info-border: #243d69;
  --pico-color-warning: #f2b552;
  --pico-color-warning-bg: #261b08;
  --pico-color-warning-border: #573f14;
  --pico-color-danger: #ff8a7e;
  --pico-color-danger-bg: #2a1311;
  --pico-color-danger-border: #5c2621;
  --pico-color-danger-solid: #d63b2f;
  --pico-color-danger-solid-hover: #bf3227;

  --pico-color-state-live: #3ccf6e;
  --pico-color-state-starting: #6ea0ff;
  --pico-color-state-reload: #f0a73a;
  --pico-color-state-archived: #7b8494;
  --pico-color-state-failed: #ff5a4e;
  --pico-color-state-down: #ff7d3f;
  --pico-color-state-unknown: #5a6272;

  --pico-color-code-bg: #0a0d11;
  --pico-color-code-border: #252b35;
  --pico-color-code-text: #dfe4ec;
  --pico-color-code-muted: #8a94a6;
  --pico-color-highlight: #2a2410;

  --pico-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --pico-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  --pico-shadow-md: 0 12px 28px -6px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.03);
  --pico-shadow-lg: 0 24px 56px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.04);
  --pico-shadow-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --pico-focus-shadow: 0 0 0 3px rgb(110 160 255 / 0.25);
  }
}