/* =============================== theme.css ====================================
   THE ONE FILE. Every font, size, weight, colour, corner, shadow and timing the
   redesigned screens use is defined here and nowhere else. `app.css` holds
   layout and components and only ever REFERS to what is below — it contains no
   font size, no weight, no colour and no radius of its own for a themed screen.

   To change how the product looks, change this file:

     · a text style     → section 1   (five styles; edit one, every use follows)
     · a font family    → section 2
     · a colour         → section 3
     · corner rounding  → section 4
     · shadows, motion  → sections 5–6

   ┌──────────┬───────┬─────────┬────────┬────────────────────────────────────┐
   │ style    │ size  │ leading │ weight │ used for                           │
   ├──────────┼───────┼─────────┼────────┼────────────────────────────────────┤
   │ display  │ 24px  │ 1.1     │ strong │ headline figures (stat tiles)      │
   │ title    │ 20px  │ 1.25    │ strong │ the page title — one per screen    │
   │ heading  │ 15px  │ 1.35    │ strong │ dialog titles, empty states,       │
   │          │       │         │        │ figures inside a detail panel      │
   │ body     │ 13px  │ 1.5     │ regular│ table cells, controls, sentences   │
   │ caption  │ 12px  │ 1.4     │ medium │ column heads, field labels, tags,  │
   │          │       │         │        │ secondary lines, counts            │
   └──────────┴───────┴─────────┴────────┴────────────────────────────────────┘

   Each style is a BUNDLE — size, leading, weight, tracking and colour — not a
   single number, so "make captions a little larger and lighter" is one edit in
   one place. A component picks a style; where it needs emphasis inside that
   style it picks a weight from section 1b. It never invents a size.

   Scope. The product is moving to this theme one screen at a time, so the
   tokens live on `.t2` rather than `:root`: a screen (or a piece of shared
   chrome) joins by carrying the class `t2`, and a screen that has not been
   reworked yet is not touched. When the last one has joined, `.t2` below
   becomes `:root` and nothing else changes.

   Nothing here computes, formats or reorders a value. It is paint. */

.t2 {
  /* ---- 1. text styles ------------------------------------------------------ */
  --type-display-size: 24px;  --type-display-leading: 1.1;  --type-display-weight: 600;
  --type-display-tracking: -.025em;  --type-display-color: var(--ink);

  --type-title-size: 20px;    --type-title-leading: 1.25;   --type-title-weight: 600;
  --type-title-tracking: -.017em;    --type-title-color: var(--ink);

  --type-heading-size: 15px;  --type-heading-leading: 1.35; --type-heading-weight: 600;
  --type-heading-tracking: -.01em;   --type-heading-color: var(--ink);

  --type-body-size: 13px;     --type-body-leading: 1.5;     --type-body-weight: 400;
  --type-body-tracking: 0;           --type-body-color: var(--ink-2);

  --type-caption-size: 12px;  --type-caption-leading: 1.4;  --type-caption-weight: 500;
  --type-caption-tracking: 0;        --type-caption-color: var(--ink-4);

  /* The same five, as `font` shorthands for a rule that wants the whole style. */
  --type-display: var(--type-display-weight) var(--type-display-size)/var(--type-display-leading) var(--sans);
  --type-title:   var(--type-title-weight)   var(--type-title-size)/var(--type-title-leading)     var(--sans);
  --type-heading: var(--type-heading-weight) var(--type-heading-size)/var(--type-heading-leading) var(--sans);
  --type-body:    var(--type-body-weight)    var(--type-body-size)/var(--type-body-leading)       var(--sans);
  --type-caption: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-leading) var(--sans);

  /* ---- 1b. emphasis within a style ---------------------------------------- */
  --weight-regular: 400;  --weight-medium: 500;  --weight-strong: 600;
  /* Running text that wraps (notes, help, definitions) vs. a label on a line. */
  --leading-relaxed: 1.55;  --leading-snug: 1.3;
  --metric-medium-size: 36px; /* compact dashboard count */
  --metric-large-size: 44px; /* dashboard count, distinct from running text */
  /* Initials inside a 24px mark or avatar: the caption, stepped down to fit. */
  --mark-size: calc(var(--type-caption-size) - 2px);

  /* ---- 2. font families ---------------------------------------------------- */
  --sans: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;   /* hashes and codes only */

  /* ---- 3. colour ------------------------------------------------------------
     Slate. Tone rather than hue: a light rail on a hairline, a tinted page a
     step darker than its cards, and white surfaces that therefore lift. Every
     neutral carries the same slight blue-grey cast, so the greys read as one
     family. One working colour — a desaturated steel navy, dark enough to
     behave like ink — for the primary action, selection and focus. Hue proper
     is spent on two things only: status, and the single copper "this is next"
     signal. When something on screen is coloured, it means something. */
  /* text */
  --ink: #1B2430;  --ink-2: #2E3947;  --ink-3: #4F5D6E;  --ink-4: #667485;
  --ink-5: #A9B3BF; --ink-placeholder: #7A8797; --dash: #97A3B1; --faint: #8492A3;
  /* lines */
  --line: #D5DCE4; --line-2: #E3E8EE; --line-3: #EDF1F5;
  --input-line: #C6CFD9; --control-line: #8492A3;
  /* surfaces */
  --paper: #EEF1F5; --page-wash: #E7EBF0;
  --surface: #FFFFFF; --surface-2: #EEF2F6; --surface-3: #F4F6F9; --surface-4: #F8FAFB;
  --hover-wash: rgba(27,36,48,.05); --active-wash: rgba(27,36,48,.08);
  --glass: rgba(255,255,255,.55);
  --setup-scrim: rgba(15,23,42,.42);
  --setup-shadow-color: rgba(15,23,42,.3);
  --viewer-scrim: #101b2bb3;
  --viewer-shadow-color: #0005;
  --scrim: rgba(23,32,44,.50);
  --skel-hi: #DDE4EB;
  /* the working colour */
  --accent: #25374D; --accent-hover: #1A2A3D; --accent-ink: #25374D;
  --accent-tint: #E3EAF2; --accent-tint-line: #C9D5E2;
  --accent-wash: rgba(37,55,77,.08);
  --on-accent: #FFFFFF; --on-accent-2: rgba(255,255,255,.72);
  --link: #25374D; --focus: #35506F; --ring: 0 0 0 3px rgba(53,80,111,.18);
  /* the one "do this next" signal */
  --brand-accent: #B4531A; --brand-accent-halo: rgba(180,83,26,.14); --kicker-fg: #667485;
  /* Schedule review movement and date-review notes. */
  --why-movement-earlier-color: #27816a; --why-movement-later-color: #b65e28;
  --why-review-ink: #91551b; --why-review-tint: #fff3e3;
  --why-review-line: #dbb889; --why-review-wash: #fff8ed;
  --schedule-dialog-backdrop: rgba(20,24,29,.35);
  --workflow-menu-shadow: 0 8px 24px rgba(18,22,27,.12);
  /* status */
  --danger: #A8291F; --danger-dot: #D0382C; --danger-tint: #FCEFED;
  --danger-tint-2: #FEF7F6; --danger-line: #F6D6D2; --danger-line-2: #EDB9B3;
  --warn: #85560A; --warn-dot: #C28A12; --warn-tint: #FBF3DF; --warn-line: #EBDAAE;
  --ok: #1A6545; --ok-dot: #2F9467; --ok-tint: #E6F3EC; --ok-line: #C4E0D1;
  --neutral: #4F5D6E; --neutral-dot: #97A3B1;
  /* F6: the one colour for a value the AI proposed and no person has yet
     confirmed. Blue, so it reads as "proposed" beside the ink of everything a
     person set or the file stated; the product has one theme, so one value.
     A confirmed or edited value takes the normal ink and loses the mark. */
  --ai: #1B4FD8; --ai-tint: #E8EEFB; --ai-line: #C9D6F5;
  /* F7: one fixed colour per slip cause, read by the project-level
     attribution and by the per-activity breakdown alike (compare/causes.js).
     Progress causes in the cool half, re-plan causes in the warm half; a bar
     of several causes and the unattributed remainder are greys. */
  --cause-data-date-push: #637BDD; --cause-unfinished-work: #189D91; --cause-actual-dates: #389DC6;
  --cause-remaining-duration-change: #C28A12; --cause-original-duration-change: #D9A441;
  --cause-logic-change: #B4531A; --cause-constraint-change: #8E44AD; --cause-calendar-change: #2F9467;
  --cause-mixed: #6B7684; --cause-residual: #A9B3BF;
  /* F9: the lines a reviewer adds to the Trends chart, one colour each, in
     the order they were added; the ninth wraps to the first. */
  --series-1: #25374D; --series-2: #B4531A; --series-3: #2F9467; --series-4: #8E44AD;
  --series-5: #C28A12; --series-6: #2F6F9F; --series-7: #A8291F; --series-8: #5B7DB1;
  /* fills with a little form: controls, the primary, headers, tiles */
  --control-bg: linear-gradient(180deg, #FFFFFF, #F6F8FA);
  --control-bg-hover: linear-gradient(180deg, #FAFBFC, #EEF2F6);
  --primary-bg: linear-gradient(180deg, #32496A, #25374D);        --primary-line: #1F3045;
  --primary-bg-hover: linear-gradient(180deg, #2B405D, #1D2D41);  --primary-line-hover: #172537;
  --primary-shadow: 0 1px 2px rgba(27,36,48,.28), inset 0 1px 0 rgba(255,255,255,.14);
  --head-bg: linear-gradient(180deg, #F6F8FA, #EFF3F7);
  --tile-bg: linear-gradient(180deg, #F7F9FB, #EFF3F7);
  --sheet-head-bg: linear-gradient(180deg, #F7F9FB, #FFFFFF);
  --strip-bg: linear-gradient(180deg, #F3F5F8, #ECF0F4);
  /* the inverse bar (selection) and tooltips: light on ink */
  --inverse-bg: linear-gradient(180deg, #2A3A4E, #1E2A39); --inverse-solid: #1B2430;
  --inverse-text: #FFFFFF; --inverse-text-2: #C9CCD3; --inverse-text-3: #B9BDC6; --inverse-muted: #7A808B;
  --inverse-wash: rgba(255,255,255,.10); --inverse-wash-2: rgba(255,255,255,.12); --inverse-wash-3: rgba(255,255,255,.07);
  --inverse-control: #FFFFFF; --inverse-control-hover: #E9EAEC;
  /* the rail */
  /* The spine. It is the one dark object in the product, and it is dark for a
     structural reason rather than a decorative one: at 64px it is a permanent
     edge the eye reads as the frame of the window, so the page beside it is
     unmistakably the work. A light rail at this width reads as a leftover
     column. `--rail-mark` is the "you are here" bar, the only bright thing on
     it, which is why it is not the accent (too dark to show here). */
  --sidebar-bg: #1A222D; --sidebar-bg-2: #232D3A; --sidebar-line: #283341;
  --sidebar-line-2: #323E4D; --sidebar-text: #ECF0F5; --sidebar-text-2: #AAB6C4;
  --sidebar-text-3: #7B8798; --sidebar-label: #78849A; --sidebar-dot: #93A0B0;
  --sidebar-dot-on: #FFFFFF; --rail-mark: #FFFFFF; --rail-hover: rgba(255,255,255,.07);
  --rail-on: rgba(255,255,255,.12); --rail-badge: rgba(255,255,255,.14);
  /* Surfaces that open INSIDE the rail -- the project switcher's list. On ink,
     recession is a hole rather than a raised card: a field is cut into the
     spine (black, not white), and the panel it sits in is the one step lighter.
     The dot ring is achromatic on purpose, so the health colour it surrounds is
     the only thing carrying meaning. */
  /* `--rail-badge` composited onto `--sidebar-bg`, as an opaque colour. The
     folded rail needs the same chip the open one has, but OPAQUE: at 64px the
     count sits on top of the icon, and a translucent chip let the glyph's
     outline run through the digit. Same value, so the badge does not change
     colour when the rail folds. */
  --rail-chip: #3A414A;
  --rail-panel: #212B37; --rail-field: rgba(0,0,0,.26);
  --rail-dot-ring: rgba(255,255,255,.10);
  --rail-skel: rgba(255,255,255,.07); --rail-skel-hi: rgba(255,255,255,.17);

  /* ---- 4. corners ---------------------------------------------------------- */
  /* Project setup wizard (v2): the design's own steps between the five text
     styles -- the step title, tags, the large recorded value -- and the two
     agency marks on step 3. */
  --sw-size-step: 18px; --sw-size-tag: 11px; --sw-size-micro: 10px; --sw-size-figure: 22px;
  --std-usace-tint: #FBEEE6; --std-usace-ink: #9A3412; --std-usace-line: #C2581C;
  --std-navfac-tint: #E6ECF5; --std-navfac-ink: #1E3A5F;
  --radius-xs: 4px;    /* checkboxes, tags, skeleton bars */
  --radius-sm: 6px;    /* buttons, inputs, nav items, menu items */
  --radius-md: 8px;    /* the switcher, notes, small panels */
  --radius-lg: 10px;   /* cards, tiles, the list surface, menus */
  --radius-xl: 12px;   /* dialogs, the selection bar */
  --radius-pill: 999px;

  /* ---- 5. elevation: resting card, raised card, floating menu, dialog ------
     Tinted with the ink's own hue — a neutral black shadow on a blue-grey
     ground reads as dirt. */
  --shadow-1: 0 1px 2px rgba(27,36,48,.06), 0 1px 1px rgba(27,36,48,.04);
  --shadow-2: 0 1px 2px rgba(27,36,48,.05), 0 4px 12px -4px rgba(27,36,48,.10);
  --shadow-3: 0 0 0 1px rgba(27,36,48,.08), 0 4px 8px -2px rgba(27,36,48,.10), 0 14px 28px -8px rgba(27,36,48,.20);
  --shadow-4: 0 0 0 1px rgba(27,36,48,.10), 0 28px 64px -14px rgba(27,36,48,.42);
  --shadow-tip: 0 6px 16px -6px rgba(27,36,48,.5);
  --shadow-up: 0 -1px 0 rgba(27,36,48,.04), 0 -8px 20px -12px rgba(27,36,48,.18);   /* a bar resting on the bottom edge */

  /* ---- 6. motion: how long, and how it settles ----------------------------- */
  --t-fast: 120ms; --t-med: 180ms; --ease: cubic-bezier(.2, .8, .2, 1);

  /* The ground every themed box stands on: the body style. */
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---- the five styles as classes, for markup that wants one directly -------- */
.t2 .tx-display { font: var(--type-display); letter-spacing: var(--type-display-tracking); color: var(--type-display-color); font-variant-numeric: tabular-nums; }
.t2 .tx-title   { font: var(--type-title);   letter-spacing: var(--type-title-tracking);   color: var(--type-title-color); }
.t2 .tx-heading { font: var(--type-heading); letter-spacing: var(--type-heading-tracking); color: var(--type-heading-color); }
.t2 .tx-body    { font: var(--type-body);    letter-spacing: var(--type-body-tracking);    color: var(--type-body-color); }
.t2 .tx-caption { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); color: var(--type-caption-color); }
.t2 .tx-strong  { font-weight: var(--weight-strong); }
.t2 .tx-medium  { font-weight: var(--weight-medium); }
.t2 .tx-num     { font-variant-numeric: tabular-nums; }

/* Existing trial component values, centralized without changing their appearance.
   Root scope also covers legacy TIA elements outside a .t2 ancestor. */
:root {
  --schedule-dialog-backdrop: rgba(20,24,29,.35);
  --component-color-17263d04: #17263d04;
  --component-color-17816a: #17816a;
  --component-color-18283d77: #18283d77;
  --component-color-1b325a0a: #1b325a0a;
  --component-color-1f334504: #1f334504;
  --component-color-1f385426: #1f385426;
  --component-color-20344e06: #20344e06;
  --component-color-20385304: #20385304;
  --component-color-2038530a: #2038530a;
  --component-color-2038531a: #2038531a;
  --component-color-23395412: #23395412;
  --component-color-23395426: #23395426;
  --component-color-24395206: #24395206;
  --component-color-25364e: #25364e;
  --component-color-263349: #263349;
  --component-color-26354b: #26354b;
  --component-color-293c56: #293c56;
  --component-color-29487215: #29487215;
  --component-color-294f83: #294f83;
  --component-color-304966: #304966;
  --component-color-33816d: #33816d;
  --component-color-345b8f: #345b8f;
  --component-color-365f95: #365f95;
  --component-color-3f6295: #3f6295;
  --component-color-426a9b: #426a9b;
  --component-color-426a9b0f: #426a9b0f;
  --component-color-52647b: #52647b;
  --component-color-526f97: #526f97;
  --component-color-537bc1: #537bc1;
  --component-color-58677b: #58677b;
  --component-color-59677b: #59677b;
  --component-color-5a6b82: #5a6b82;
  --component-color-61738d: #61738d;
  --component-color-6188bc12: #6188bc12;
  --component-color-6389bf: #6389bf;
  --component-color-638aba: #638aba;
  --component-color-647489: #647489;
  --component-color-6689ba: #6689ba;
  --component-color-6a778b: #6a778b;
  --component-color-718099: #718099;
  --component-color-77869a: #77869a;
  --component-color-78869b: #78869b;
  --component-color-788ba7: #788ba7;
  --component-color-7b879a: #7b879a;
  --component-color-7b8ca4: #7b8ca4;
  --component-color-7c8ba0: #7c8ba0;
  --component-color-7d8da2: #7d8da2;
  --component-color-7f8da1: #7f8da1;
  --component-color-8090a7: #8090a7;
  --component-color-8299b7: #8299b7;
  --component-color-8490a1: #8490a1;
  --component-color-8592a5: #8592a5;
  --component-color-8995a7: #8995a7;
  --component-color-8d9db3: #8d9db3;
  --component-color-91a1b7: #91a1b7;
  --component-color-95a9c5: #95a9c5;
  --component-color-9baec7: #9baec7;
  --component-color-9cb4d3: #9cb4d3;
  --component-color-a3b3c9: #a3b3c9;
  --component-color-a45c28: #a45c28;
  --component-color-a5b5c9: #a5b5c9;
  --component-color-a6b5c8: #a6b5c8;
  --component-color-ad652c: #ad652c;
  --component-color-b46429: #b46429;
  --component-color-b8c9df: #b8c9df;
  --component-color-bbcadd: #bbcadd;
  --component-color-c4874b: #c4874b;
  --component-color-c4d3e6: #c4d3e6;
  --component-color-c8d3e2: #c8d3e2;
  --component-color-cad6e5: #cad6e5;
  --component-color-d1dff1: #d1dff1;
  --component-color-d2dae6: #d2dae6;
  --component-color-d5deea: #d5deea;
  --component-color-d7e1ef: #d7e1ef;
  --component-color-dae5f3: #dae5f3;
  --component-color-dbe3ee: #dbe3ee;
  --component-color-dce3ed: #dce3ed;
  --component-color-dce4ee: #dce4ee;
  --component-color-dce4ef: #dce4ef;
  --component-color-dde4ed: #dde4ed;
  --component-color-dfe5ec: #dfe5ec;
  --component-color-dfe5ee: #dfe5ee;
  --component-color-dfe5ef: #dfe5ef;
  --component-color-e2e7ef: #e2e7ef;
  --component-color-e4e9f0: #e4e9f0;
  --component-color-e4edf9: #e4edf9;
  --component-color-e5eaf1: #e5eaf1;
  --component-color-e6edf5: #e6edf5;
  --component-color-e6eef8: #e6eef8;
  --component-color-e7edf5: #e7edf5;
  --component-color-e9f0f8: #e9f0f8;
  --component-color-edf0f5: #edf0f5;
  --component-color-edf2f8: #edf2f8;
  --component-color-edf2fa: #edf2fa;
  --component-color-edf3fa: #edf3fa;
  --component-color-edf3fb: #edf3fb;
  --component-color-eef3fa: #eef3fa;
  --component-color-eff2f6: #eff2f6;
  --component-color-f0f3f7: #f0f3f7;
  --component-color-f0f8f5: #f0f8f5;
  --component-color-f1f3f7: #f1f3f7;
  --component-color-f1f4f8: #f1f4f8;
  --component-color-f1f6fc: #f1f6fc;
  --component-color-f2faf6: #f2faf6;
  --component-color-f4f6f9: #f4f6f9;
  --component-color-f4f7fb: #f4f7fb;
  --component-color-f4f8fe: #f4f8fe;
  --component-color-f5f7fa: #f5f7fa;
  --component-color-f7f9fc: #f7f9fc;
  --component-color-f8fafc: #f8fafc;
  --component-color-f9fafc: #f9fafc;
  --component-color-fafbfd: #fafbfd;
  --component-color-fafcff: #fafcff;
  --component-color-fff: #fff;
  --component-color-fff8f2: #fff8f2;
  --component-color-ffffffed: #ffffffed;
  --component-radius-10px: 10px;
  --component-radius-12px: 12px;
  --component-radius-14px: 14px;
  --component-radius-3px: 3px;
  --component-radius-4px: 4px;
  --component-radius-5px: 5px;
  --component-radius-6px: 6px;
  --component-radius-7px: 7px;
  --component-radius-8px: 8px;
  --component-radius-9px: 9px;
  --component-size-10px: 10px;
  --component-size-11px: 11px;
  --component-size-12px: 12px;
  --component-size-13px: 13px;
  --component-size-14px: 14px;
  --component-size-16px: 16px;
  --component-size-17px: 17px;
  --component-size-18px: 18px;
  --component-size-19px: 19px;
  --component-size-20px: 20px;
  --component-size-21px: 21px;
  --component-size-22px: 22px;
  --component-size-24px: 24px;
  --component-size-25px: 25px;
  --component-size-26px: 26px;
  --component-size-32px: 32px;
  --component-size-8px: 8px;
  --component-size-9px: 9px;
  --component-weight-500: 500;
  --component-weight-550: 550;
  --component-weight-600: 600;
  --component-weight-650: 650;
}

/* Schedule removal uses the same clear confirmation in Setup and Schedules. */
.schedule-delete-modal .modal-head h2 { color: #a52620; }
.schedule-delete-modal .modal-body > input { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid #b9c3cf; border-radius: 8px; padding: 10px 12px; }
.schedule-delete-modal .modal-body > input:focus { outline: none; border-color: #a52620; box-shadow: 0 0 0 3px rgb(165 38 32 / 12%); }
.schedule-delete-modal .modal-foot .danger-h:not(:disabled) { background: #a52620; border-color: #a52620; color: white; }

/* Trial workflow components: retain their existing rendered values. */
:root {
  --component-color-27816a: #27816a;
  --component-color-91551b: #91551b;
  --component-color-b65e28: #b65e28;
  --component-color-dbb889: #dbb889;
  --component-color-fff3e3: #fff3e3;
  --component-color-fff8ed: #fff8ed;
  --radius-component-8: 8px;
  --radius-component-10: 10px;
  --workflow-menu-shadow-color: rgba(18,22,27,.12);
}

/* Project setup wizard (v2): the design's own palette and mono face, scoped to
   the wizard and the dialogs it opens, so the screen matches its design
   without moving a colour anywhere else in the app. */
.sw, .sw-scrim {
  --accent: #1E293B; --accent-hover: #0F172A; --accent-ink: #1E293B; --accent-tint: #EEF1F5;
  --accent-tint-line: #CBD5E1; --accent-wash: rgba(30, 41, 59, .12); --link: #1E293B; --focus: #1E293B;
  --on-accent: #FFFFFF; --on-accent-2: #CBD5E1;
  --ink: #111827; --ink-2: #374151; --ink-3: #4B5563; --ink-4: #6B7280; --ink-5: #9CA3AF;
  --line: #D1D5DB; --line-2: #E5E7EB; --line-3: #F1F2F4; --input-line: #D1D5DB;
  --surface: #FFFFFF; --surface-2: #F3F4F6; --surface-3: #F4F6F9; --surface-4: #F9FAFB;
  --ok: #15803D; --ok-dot: #16A34A; --ok-tint: #F3FAF6; --ok-line: #CFE9D8; --sw-ok-ink: #14532D; --sw-ok-panel: #F6FBF8;
  --warn: #B45309; --warn-dot: #D97706; --warn-tint: #FFFBEB; --warn-line: #FCD34D; --sw-warn-ink: #92400E;
  --danger: #B91C1C; --danger-dot: #DC2626; --danger-tint: #FEF2F2; --danger-tint-2: #FEF7F7;
  --danger-line: #FECACA; --danger-line-2: #FCA5A5;
  --inverse-solid: #1F2937; --inverse-text: #F9FAFB; --inverse-wash-2: rgba(255, 255, 255, .15);
  --sw-kicker: #8B6B3D; --sw-disabled: #94A3B8; --sw-form: #FAFBFC; --sw-fresh: #F3FAF6;
  --sw-scrim: rgba(17, 24, 39, .55); --sw-scrim-2: rgba(17, 24, 39, .35);
  --sw-shadow: 0 24px 48px rgba(0, 0, 0, .25); --sw-shadow-2: 0 24px 48px rgba(0, 0, 0, .3);
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cmp-host.kind-setup { --sw-scrim: rgba(17, 24, 39, .55); --sw-shadow: 0 24px 48px rgba(0, 0, 0, .25); }