/*
 * DTP design tokens (plan ruling 4). One file, light + dark, product-wide.
 *
 * Every token is prefixed --dtp- so it never collides with the legacy variables
 * defined inline in base/base.html (--color-primary, --bg-primary, ...), which keep
 * working unchanged. New components use only --dtp-* tokens.
 *
 * Theme selection:
 *   [data-theme="light"] / [data-theme="dark"]  the product toggle (base.html sets it
 *                                                from localStorage 'theme')
 *   [data-theme="auto"] or no data-theme         follows prefers-color-scheme
 *
 * Contrast: every *-fg on its *-soft background and on --dtp-surface is >= 4.5:1
 * (WCAG AA text) in both themes; *-solid stripes, --dtp-primary, --dtp-focus and
 * --dtp-border-strong are >= 3:1 against --dtp-surface (WCAG 1.4.11). The legacy
 * #3b82f6 is 3.68:1 on white, so it stays the identity/UI colour (focus, stripes,
 * selection) and text/button fills use --dtp-primary-text / --dtp-primary-fill.
 * Status is never colour alone: components pair every tone with an icon and a label.
 */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono/2.5.0/IBMPlexMono-Regular.b51685c998a0.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono/2.5.0/IBMPlexMono-Medium.91abacd323ba.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono/2.5.0/IBMPlexMono-SemiBold.7d69bd02da7b.woff2") format('woff2');
}

/* -- theme-independent tokens ------------------------------------------------ */
:root {
  /* type: Roboto is vendored and loaded by base.html (vendor/google-fonts/roboto.css) */
  --dtp-font-ui: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dtp-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --dtp-text-xs: 0.75rem;     /* 12px: captions, "as of" stamps */
  --dtp-text-sm: 0.875rem;    /* 14px: dense grid cells */
  --dtp-text-md: 1rem;        /* 16px: body */
  --dtp-text-lg: 1.125rem;    /* 18px */
  --dtp-text-xl: 1.375rem;    /* 22px: strip values */
  --dtp-text-2xl: 1.75rem;
  --dtp-text-3xl: 2.5rem;     /* 40px: the product mark on the signed-out pages */
  --dtp-leading-tight: 1.25;
  --dtp-leading-normal: 1.5;
  --dtp-weight-regular: 400;
  --dtp-weight-medium: 500;
  --dtp-weight-bold: 700;

  /* spacing: 4px scale */
  --dtp-space-0: 0;
  --dtp-space-1: 0.25rem;
  --dtp-space-2: 0.5rem;
  --dtp-space-3: 0.75rem;
  --dtp-space-4: 1rem;
  --dtp-space-5: 1.5rem;
  --dtp-space-6: 2rem;
  --dtp-space-7: 3rem;

  --dtp-radius-sm: 4px;
  --dtp-radius-md: 6px;
  --dtp-radius-lg: 10px;
  --dtp-radius-pill: 999px;
  --dtp-radius-stamp: 2px;     /* ruled marks: the TP2D mark, approval codes (a stamp is square-cornered in every palette) */

  /* touch: minimum hit area on field screens (ruling 4) */
  --dtp-touch-target: 44px;
  /* grid row heights for the density toggle */
  --dtp-row-compact: 32px;
  --dtp-row-comfortable: 44px;

  --dtp-focus-width: 3px;
  --dtp-focus-offset: 2px;

  /* z-index scale */
  --dtp-z-base: 0;
  --dtp-z-sticky: 10;
  --dtp-z-dropdown: 100;
  --dtp-z-overlay: 900;
  --dtp-z-dialog: 1000;
  --dtp-z-toast: 1100;

  /* motion */
  --dtp-duration-fast: 120ms;
  --dtp-duration-normal: 200ms;
  --dtp-ease: cubic-bezier(0.2, 0, 0, 1);

  --dtp-split-min: 280px;   /* minimum pane width in split_pane.js */

  /* fixed dark surfaces that stay dark in both themes (the feedback annotation toolbar);
     --dtp-inverse-text-muted on --dtp-inverse-surface is 5.7:1 */
  --dtp-inverse-surface: #1e293b;
  --dtp-inverse-text-muted: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dtp-duration-fast: 0ms;
    --dtp-duration-normal: 0ms;
  }
}

/* -- light (default) --------------------------------------------------------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --dtp-canvas: #f5f7fa;          /* page background (legacy --bg-secondary) */
  --dtp-surface: #ffffff;         /* cards, grid body */
  --dtp-surface-raised: #ffffff;
  --dtp-surface-sunken: #eef1f5;  /* grid header, segmented control track */
  --dtp-border: #e5e7eb;          /* hairlines (decorative) */
  --dtp-border-strong: #8b93a1;   /* input and control outlines (>= 3:1) */
  --dtp-text: #111827;
  --dtp-text-muted: #4b5563;
  --dtp-text-subtle: #5f6672;
  --dtp-overlay: rgba(17, 24, 39, 0.45);
  --dtp-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.08);
  --dtp-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.12);

  --dtp-primary: #3b82f6;         /* product identity: stripes, selection, UI accents */
  --dtp-primary-text: #1d4ed8;    /* links and primary-coloured text */
  --dtp-primary-fill: #2563eb;    /* primary button background */
  --dtp-on-primary: #ffffff;
  --dtp-primary-soft: #dbeafe;
  --dtp-row-selected: #dbeafe;
  --dtp-row-hover: #f3f6fb;
  --dtp-focus: #1d4ed8;

  /* Color_Theme.png warm palette — ok=approved green, warn=review yellow,
     crit=blocked rose, na=gray, info=blue, violet=purple */
  --dtp-ok-fg: #257b35;
  --dtp-ok-soft: #e6f3e9;
  --dtp-ok-solid: #2f9e44;
  --dtp-ok-on-solid: #111827;

  --dtp-warn-fg: #926500;
  --dtp-warn-soft: #fcf4e0;
  --dtp-warn-solid: #c38700;
  --dtp-warn-on-solid: #111827;

  --dtp-crit-fg: #c52c22;
  --dtp-crit-soft: #fae6e5;
  --dtp-crit-solid: #d93025;
  --dtp-crit-on-solid: #ffffff;

  --dtp-na-fg: #656b78;
  --dtp-na-soft: #edeef0;
  --dtp-na-solid: #6b7280;
  --dtp-na-on-solid: #ffffff;

  --dtp-info-fg: #0e7482;
  --dtp-info-soft: #e2eff1;
  --dtp-info-solid: #0f7b8a;
  --dtp-info-on-solid: #ffffff;

  /* a fifth hue for categories that are not a status (e.g. the ADMIN_ORG organisation type) */
  --dtp-violet-fg: #6d28d9;
  --dtp-violet-soft: #ede9fe;
  --dtp-violet-solid: #6d28d9;
  --dtp-violet-on-solid: #ffffff;
  /* Chart series (home and dashboards): the old warm set, the pale one dark enough to show on white */
  --tl-series-salmon: #c27a6e;
  --tl-series-amber: #b8960f;
  --tl-series-steel: #5a7ea5;
  --tl-series-sand: #c9955a;
  --tl-series-pale: #7fa36b;
}

/* -- dark ------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --dtp-canvas: #1c2128;          /* Neutral dark: a cool slate, not near-black */
  --dtp-surface: #22272e;         /* legacy dark --bg-primary */
  --dtp-surface-raised: #2d333b;
  --dtp-surface-sunken: #1f242b;
  --dtp-border: #373e47;
  --dtp-border-strong: #768390;
  --dtp-text: #e6edf3;
  --dtp-text-muted: #b6c2cf;
  --dtp-text-subtle: #9fadbb;
  --dtp-overlay: rgba(0, 0, 0, 0.6);
  --dtp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dtp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);

  --dtp-primary: #6ca0f6;         /* legacy dark primary */
  --dtp-primary-text: #9dbdf7;
  --dtp-primary-fill: #2563eb;
  --dtp-on-primary: #ffffff;
  --dtp-primary-soft: #243c5f;
  --dtp-row-selected: #243c5f;
  --dtp-row-hover: #2a3038;
  --dtp-focus: #9dbdf7;

  /* Dark-mode Color_Theme.png warm palette (desaturated for dark backgrounds) */
  --dtp-ok-fg: #5fbb71;
  --dtp-ok-soft: #243a2b;
  --dtp-ok-solid: #2f9e44;
  --dtp-ok-on-solid: #111827;

  --dtp-warn-fg: #eaa81a;
  --dtp-warn-soft: #443a22;
  --dtp-warn-solid: #e8a100;
  --dtp-warn-on-solid: #111827;

  --dtp-crit-fg: #ee8580;
  --dtp-crit-soft: #482a28;
  --dtp-crit-solid: #d93025;
  --dtp-crit-on-solid: #ffffff;

  --dtp-na-fg: #a3aab5;
  --dtp-na-soft: #343a42;
  --dtp-na-solid: #6b7280;
  --dtp-na-on-solid: #ffffff;

  --dtp-info-fg: #63b1bc;
  --dtp-info-soft: #1f3a3f;
  --dtp-info-solid: #0f7b8a;
  --dtp-info-on-solid: #ffffff;

  --dtp-violet-fg: #c9bcfd;
  --dtp-violet-soft: #35205f;
  --dtp-violet-solid: #a78bfa;
  --dtp-violet-on-solid: #1e0b3d;
  /* Chart series: lifted for the slate ground */
  --tl-series-salmon: #d99488;
  --tl-series-amber: #d4b13a;
  --tl-series-steel: #85a8cf;
  --tl-series-sand: #dbb07a;
  --tl-series-pale: #b9cf98;
}

/* -- auto: follow the OS when the product toggle has not chosen ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), [data-theme="auto"] {
    color-scheme: dark;
    --dtp-canvas: #1c2128;
    --dtp-surface: #22272e;
    --dtp-surface-raised: #2d333b;
    --dtp-surface-sunken: #1f242b;
    --dtp-border: #373e47;
    --dtp-border-strong: #768390;
    --dtp-text: #e6edf3;
    --dtp-text-muted: #b6c2cf;
    --dtp-text-subtle: #9fadbb;
    --dtp-overlay: rgba(0, 0, 0, 0.6);
    --dtp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --dtp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --dtp-primary: #6ca0f6;
    --dtp-primary-text: #9dbdf7;
    --dtp-primary-fill: #2563eb;
    --dtp-on-primary: #ffffff;
    --dtp-primary-soft: #243c5f;
    --dtp-row-selected: #243c5f;
    --dtp-row-hover: #2a3038;
    --dtp-focus: #9dbdf7;
    --dtp-ok-fg: #5fbb71;
    --dtp-ok-soft: #243a2b;
    --dtp-ok-solid: #2f9e44;
    --dtp-ok-on-solid: #111827;
    --dtp-warn-fg: #eaa81a;
    --dtp-warn-soft: #443a22;
    --dtp-warn-solid: #e8a100;
    --dtp-warn-on-solid: #111827;
    --dtp-crit-fg: #ee8580;
    --dtp-crit-soft: #482a28;
    --dtp-crit-solid: #d93025;
    --dtp-crit-on-solid: #ffffff;
    --dtp-na-fg: #a3aab5;
    --dtp-na-soft: #343a42;
    --dtp-na-solid: #6b7280;
    --dtp-na-on-solid: #ffffff;
    --dtp-info-fg: #63b1bc;
    --dtp-info-soft: #1f3a3f;
    --dtp-info-solid: #0f7b8a;
    --dtp-info-on-solid: #ffffff;
    --dtp-violet-fg: #c9bcfd;
    --dtp-violet-soft: #35205f;
    --dtp-violet-solid: #a78bfa;
    --dtp-violet-on-solid: #1e0b3d;
    /* Chart series: lifted for the slate ground */
    --tl-series-salmon: #d99488;
    --tl-series-amber: #d4b13a;
    --tl-series-steel: #85a8cf;
    --tl-series-sand: #dbb07a;
    --tl-series-pale: #b9cf98;
  }
}

/* -- shared primitives --------------------------------------------------------- */
.dtp-focusable:focus-visible,
.dtp-scope :focus-visible {
  outline: var(--dtp-focus-width) solid var(--dtp-focus);
  outline-offset: var(--dtp-focus-offset);
}

.dtp-mono {
  font-family: var(--dtp-font-mono);
  font-variant-numeric: tabular-nums;
}

.dtp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Form fields follow the surface they sit on. Without a background and text colour of their own,
   fields took the browser's defaults for the page's color-scheme: dark fields on a white sign-in
   card when the computer was in dark mode, grey placeholders below 3:1. Zero specificity (:where),
   so a component's own field styles still win. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
             [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
       select, textarea) {
  background-color: var(--dtp-surface);
  color: var(--dtp-text);
}
:where(input, textarea)::placeholder {
  color: var(--dtp-text-subtle);
  opacity: 1;
}
:where(input, select, textarea):disabled {
  background-color: var(--dtp-surface-sunken);
  color: var(--dtp-text-muted);
}