/* Xen catalogue tokens. Source: xen-app-design/reference/tokens.md (2026-09-10). Do not edit values here; change the skill first. */

/* Inter, served from this site (WP-09B part 2): one variable file of Inter 4.1 that carries every weight from 400 to 700
   (the site uses 400, 500, 600, 700), cut down to Latin, punctuation, the rupee sign and arrows by local/build-fonts.sh
   (keep this range in step with it). Any other character falls back to the system font in --font-sans. The `?v=` is the
   Inter version; the heads preload the file with the same address. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Inter-Variable.woff2?v=4.1') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+FFFD; }
:root {
  /* ground and surfaces (console) */
  --ground: linear-gradient(180deg, #f3f6fc 0%, #f6f4fb 45%, #fbfaf8 100%);
  --color-paper: #fbfaf8;
  --color-paper-sunken: #eef2f5;
  --color-paper-selected: #e2e9f0;
  --color-card: #ffffff;
  --surface-photo: #ffffff;                 /* the tile behind a mark laid over a photo: white in both themes, as the artwork expects */
  --surface-mark: #ffffff;                  /* the logo plate in the rail: white in light; a dimmer cool grey in dark (see the dark blocks) */
  --color-card-raised: #ffffff;
  --color-card-edge: rgb(255 255 255 / 0.9);
  --color-hairline: #dde4ea;
  --color-rule: #cbd5de;
  /* text and action */
  --color-graphite: #071a2b;
  --color-graphite-muted: #5a6874;
  --color-ink: #071a2b;
  --color-on-ink: #ffffff;
  --color-ink-pale: #6a7b8a;
  --color-ink-wash: #e4eaf0;
  --color-action: #141619;            /* app accent: the near-black primary action */
  --color-on-action: #ffffff;
  --color-action-soft: #e5e4e3;       /* disabled primary fill */
  /* azure: link, primary control, focus ring, active nav, the one important number */
  --color-accent: #0b6fe0;
  --color-accent-hover: #0a66d0;
  --color-accent-wash: #dceeff;
  --color-accent-wash-hover: #c9e2ff;
  --color-accent-ink: #0a5cbd;
  --color-on-accent: #ffffff;           /* text on the azure fill (primary button, active nav); navy in dark (WP-08b #3, AA) */
  /* sky: plain information (app info) */
  --color-info: #1557b3;
  --color-info-soft: #e4eeff;
  /* semantic four */
  --color-committed-green: #0e7a42;   --color-committed-green-wash: #d9f0e3;
  --color-pending-amber: #8a5f16;     --color-pending-amber-wash: #f8efd9;
  --color-breach-red: #b3261e;        --color-breach-red-wash: #fbe4e2;   --color-breach-red-wash-hover: #f6d3cf;
  --color-machine-indigo: #574ac7;    --color-machine-indigo-wash: #e9e8fa;
  --color-on-danger: #ffffff;
  /* chrome, constant in both themes */
  --color-navy: #071a2b; --color-navy-2: #0d263d; --color-navy-3: #102f49;
  --color-on-navy: #ffffff; --color-on-navy-muted: #8fa3b5;
  --color-alert: #b3261e;
  --color-scrim: rgb(7 26 43 / 0.55);
  /* the cover band (app) */
  --cover: linear-gradient(180deg, #2b2e35 0%, #1e2242 60%, #161a38 100%);
  --color-cover: #23262b;
  --color-on-cover: #ffffff;
  --color-on-cover-muted: #a9a9ac;
  --color-cover-element: rgb(255 255 255 / 0.12);
  /* glass: console values for web chrome (tokens.md §8); the strong pair is the app's, for the tab bar (§1) */
  --color-glass: rgb(255 255 255 / 0.68);
  --color-glass-strong: rgb(255 255 255 / 0.78);
  --color-glass-strong-edge: rgb(255 255 255 / 0.75);   /* tab bar border (app glass) */
  --color-glass-edge: rgb(255 255 255 / 0.35);
  --color-glass-on-cover: rgb(255 255 255 / 0.14);
  --color-glass-on-cover-edge: rgb(255 255 255 / 0.26);
  --color-glass-button: rgb(15 17 23 / 0.62);
  --color-on-glass-button: #ffffff;
  /* neutral chip */
  --color-chip: #eceef4; --color-chip-text: #4a4e55;
  /* the domain six (values shared with the field-sales app) */
  --color-domain-emerald: #158a5a; --color-domain-emerald-soft: #ddf3e8; --color-domain-emerald-ink: #0b6b44; --color-domain-emerald-on-navy: #4fd19a;
  --color-domain-azure:   #1a6fe0; --color-domain-azure-soft:   #e0ecfd; --color-domain-azure-ink:   #1557b3; --color-domain-azure-on-navy:   #75adff;
  --color-domain-indigo:  #4a47c9; --color-domain-indigo-soft:  #e7e6fa; --color-domain-indigo-ink:  #3a38a8; --color-domain-indigo-on-navy:  #a19eff;
  --color-domain-teal:    #0e8c8f; --color-domain-teal-soft:    #dcf3f3; --color-domain-teal-ink:    #0a6e70; --color-domain-teal-on-navy:    #5cd1d3;
  --color-domain-amber:   #c27a0e; --color-domain-amber-soft:   #fbefd9; --color-domain-amber-ink:   #96600a; --color-domain-amber-on-navy:   #f0b54b;
  --color-domain-violet:  #8b3fd1; --color-domain-violet-soft:  #f1e6fb; --color-domain-violet-ink:  #6e2fab; --color-domain-violet-on-navy:  #c79cff;
  /* shadows (navy-tinted in light) */
  --shadow-card: 0 2px 6px rgb(7 26 43 / 0.06);
  --shadow-lift: 0 10px 24px rgb(7 26 43 / 0.12);
  --shadow-raised: 0 8px 18px rgb(30 34 66 / 0.14);
  --shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.12);
  --shadow-toast: 0 8px 30px rgb(0 0 0 / 0.35);
  /* radii */
  --radius-chip: 10px; --radius-card: 14px; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --radius-dense: 2px; --radius-sheet: 24px; --radius-pill: 999px; --radius-tabbar: 32px;
  /* spacing (4 px base) */
  --sp-half: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 64px;
  /* sizes */
  --touch: 48px; --touch-sm: 40px; --control-h: 30px; --topbar-h: 52px; --bar-wrap-h: 68px; --tabbar-h: 64px; --tabbar-clearance: 88px; --content-max: 1200px;
  /* type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* motion */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fade: 160ms; --dur-fade-fast: 120ms; --dur-fade-slow: 220ms; --dur-sweep: 600ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: linear-gradient(180deg, #0b0d14 0%, #10121e 45%, #0f1117 100%);
    --color-paper: #0f1117; --color-paper-sunken: #212d45; --color-paper-selected: #2a3855;
    --surface-mark: #c9d3e0;
    --color-card: #131a29; --color-card-raised: #1a2338; --color-card-edge: rgb(255 255 255 / 0.08);
    --color-hairline: #2a3850; --color-rule: #3a4a66;
    --color-graphite: #e9eef4; --color-graphite-muted: #9ba9be;
    --color-ink: #e9eef4; --color-on-ink: #080d16; --color-ink-pale: #6a7b8a; --color-ink-wash: #212d45;
    --color-action: #d7d8da; --color-on-action: #1a1b1d; --color-action-soft: #232427;
    --color-accent: #4da6ff; --color-accent-hover: #6fb8ff; --color-accent-wash: rgb(77 166 255 / 0.16); --color-accent-wash-hover: rgb(77 166 255 / 0.24); --color-accent-ink: #7dbdff;
    --color-on-accent: var(--color-navy);
    --color-info: #a6c8ff; --color-info-soft: #14294f;
    --color-committed-green: #4fc97d; --color-committed-green-wash: #0f3423;
    --color-pending-amber: #e8b93f; --color-pending-amber-wash: #3a2d0c;
    --color-breach-red: #f27a70; --color-breach-red-wash: #3b1815; --color-breach-red-wash-hover: #4a1e1a;
    --color-machine-indigo: #ae97f5; --color-machine-indigo-wash: #272348;
    --cover: linear-gradient(180deg, #1d1e23 0%, #191d36 60%, #12152b 100%);
    --color-cover: #1d1e23; --color-on-cover: #f5f5f6; --color-on-cover-muted: #8b8b8e; --color-cover-element: rgb(255 255 255 / 0.08);
    --color-glass: rgb(19 26 41 / 0.72); --color-glass-strong: rgb(24 25 29 / 0.74); --color-glass-edge: rgb(255 255 255 / 0.08); --color-glass-strong-edge: rgb(255 255 255 / 0.10);
    --color-glass-on-cover: rgb(255 255 255 / 0.10); --color-glass-on-cover-edge: rgb(255 255 255 / 0.18);
    --color-glass-button: rgb(255 255 255 / 0.90); --color-on-glass-button: #0f1117;
    --color-chip: #262a36; --color-chip-text: #c7c7c9;
    --color-domain-emerald: #4fd19a; --color-domain-emerald-soft: #0f3a2a; --color-domain-emerald-ink: #7fe5ba;
    --color-domain-azure:   #75adff; --color-domain-azure-soft:   #14294f; --color-domain-azure-ink:   #a6c8ff;
    --color-domain-indigo:  #a19eff; --color-domain-indigo-soft:  #25244f; --color-domain-indigo-ink:  #c1bfff;
    --color-domain-teal:    #5cd1d3; --color-domain-teal-soft:    #0e3536; --color-domain-teal-ink:    #8ee3e4;
    --color-domain-amber:   #f0b54b; --color-domain-amber-soft:   #3b2b0c; --color-domain-amber-ink:   #f7cb7a;
    --color-domain-violet:  #c79cff; --color-domain-violet-soft:  #2e1d4a; --color-domain-violet-ink:  #dbbeff;
    --shadow-card: 0 2px 6px rgb(0 0 0 / 0.4); --shadow-lift: 0 10px 24px rgb(0 0 0 / 0.5); --shadow-raised: 0 8px 18px rgb(0 0 0 / 0.5); --shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* the same block as above, copied verbatim (the toggle must win both ways) */
  --ground: linear-gradient(180deg, #0b0d14 0%, #10121e 45%, #0f1117 100%);
  --color-paper: #0f1117; --color-paper-sunken: #212d45; --color-paper-selected: #2a3855;
  --surface-mark: #c9d3e0;
  --color-card: #131a29; --color-card-raised: #1a2338; --color-card-edge: rgb(255 255 255 / 0.08);
  --color-hairline: #2a3850; --color-rule: #3a4a66;
  --color-graphite: #e9eef4; --color-graphite-muted: #9ba9be;
  --color-ink: #e9eef4; --color-on-ink: #080d16; --color-ink-pale: #6a7b8a; --color-ink-wash: #212d45;
  --color-action: #d7d8da; --color-on-action: #1a1b1d; --color-action-soft: #232427;
  --color-accent: #4da6ff; --color-accent-hover: #6fb8ff; --color-accent-wash: rgb(77 166 255 / 0.16); --color-accent-wash-hover: rgb(77 166 255 / 0.24); --color-accent-ink: #7dbdff;
  --color-on-accent: var(--color-navy);
  --color-info: #a6c8ff; --color-info-soft: #14294f;
  --color-committed-green: #4fc97d; --color-committed-green-wash: #0f3423;
  --color-pending-amber: #e8b93f; --color-pending-amber-wash: #3a2d0c;
  --color-breach-red: #f27a70; --color-breach-red-wash: #3b1815; --color-breach-red-wash-hover: #4a1e1a;
  --color-machine-indigo: #ae97f5; --color-machine-indigo-wash: #272348;
  --cover: linear-gradient(180deg, #1d1e23 0%, #191d36 60%, #12152b 100%);
  --color-cover: #1d1e23; --color-on-cover: #f5f5f6; --color-on-cover-muted: #8b8b8e; --color-cover-element: rgb(255 255 255 / 0.08);
  --color-glass: rgb(19 26 41 / 0.72); --color-glass-strong: rgb(24 25 29 / 0.74); --color-glass-edge: rgb(255 255 255 / 0.08); --color-glass-strong-edge: rgb(255 255 255 / 0.10);
  --color-glass-on-cover: rgb(255 255 255 / 0.10); --color-glass-on-cover-edge: rgb(255 255 255 / 0.18);
  --color-glass-button: rgb(255 255 255 / 0.90); --color-on-glass-button: #0f1117;
  --color-chip: #262a36; --color-chip-text: #c7c7c9;
  --color-domain-emerald: #4fd19a; --color-domain-emerald-soft: #0f3a2a; --color-domain-emerald-ink: #7fe5ba;
  --color-domain-azure:   #75adff; --color-domain-azure-soft:   #14294f; --color-domain-azure-ink:   #a6c8ff;
  --color-domain-indigo:  #a19eff; --color-domain-indigo-soft:  #25244f; --color-domain-indigo-ink:  #c1bfff;
  --color-domain-teal:    #5cd1d3; --color-domain-teal-soft:    #0e3536; --color-domain-teal-ink:    #8ee3e4;
  --color-domain-amber:   #f0b54b; --color-domain-amber-soft:   #3b2b0c; --color-domain-amber-ink:   #f7cb7a;
  --color-domain-violet:  #c79cff; --color-domain-violet-soft:  #2e1d4a; --color-domain-violet-ink:  #dbbeff;
  --shadow-card: 0 2px 6px rgb(0 0 0 / 0.4); --shadow-lift: 0 10px 24px rgb(0 0 0 / 0.5); --shadow-raised: 0 8px 18px rgb(0 0 0 / 0.5); --shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}