/* Design tokens (source: _bmad-output/planning-artifacts/ux-designs/ux-BPM-2026-10-29-redesign/DESIGN.md - the palette and
   type of creatio.com, the shell of Linear). Every color, type, spacing and shadow value is defined here only; other
   stylesheets and components consume them via var(--...). A customer rebrands the product by overriding --color-accent.
   Light theme only. */

/* The product's two families, hosted with it (fonts/, OFL - fonts/Montserrat-OFL.txt, fonts/OpenSans-OFL.txt): one variable
   file per family and script (latin, latin-ext - the Turkish letters), weights 400-700. Montserrat for headings, buttons, the
   menu and numbers; Open Sans for text (the redesign of 2026-10-29, after creatio.com). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/OpenSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/OpenSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Brand (creatio.com: its orange-red, its deep navy, its vivid blue) */
  --color-primary: #0d2e4e;            /* navy: headings, the menu's text, dark marks */
  --color-on-primary: #ffffff;
  --color-accent: #ff4013;             /* orange: the primary action, the chosen menu row's mark, the chosen path */
  --color-accent-hover: #e5340a;
  --color-accent-press: #c42a05;
  --color-accent-soft: #ffe8e3;        /* drop targets, the chosen row's tint */
  --color-accent-ink: #c42a05;         /* orange as text (eyebrows, small labels): 5.7:1 on white */
  --color-on-accent: #ffffff;
  --color-cobalt: #004fd6;             /* links, "running", technical marks (the designer's ports, its code buttons) */
  --color-cobalt-hover: #0036c6;
  --color-cobalt-soft: #e0eafa;
  --color-violet: #5b2fd6;             /* decided by the process (a request target, an epic, a condition step) */
  --color-violet-soft: #eee8fd;

  /* Canvas and surfaces */
  --color-canvas: #f8fafe;             /* page background */
  --color-surface: #ffffff;            /* cards, tables, forms, the menu */
  --color-surface-inverse: #0d2e4e;    /* inverse panel */
  --color-surface-inverse-input: #0a2540;
  --color-border: #e2e6ea;
  --color-border-hover: #c4cfdf;       /* stronger lines: inputs, a secondary button */
  --color-border-strong: #8095b3;      /* an input under the pointer, the designer's paths */
  --color-border-inverse: rgba(255, 255, 255, 0.12);

  /* Quiet surfaces (Linear): the navy, very light, never a new hue. A tint is the navy mixed into the surface by these
     amounts. */
  --tint-soft: 4%;                     /* table heads, quiet bands, tinted cards */
  --tint-hover: 6%;                    /* a row under the pointer */
  --color-tint: color-mix(in srgb, var(--color-primary) var(--tint-soft), var(--color-surface));
  --color-tint-hover: color-mix(in srgb, var(--color-primary) var(--tint-hover), var(--color-surface));
  /* The menu (Linear): white beside the page, a line between them; the chosen row a light orange with an orange bar */
  --sidebar-width: 240px;
  --sidebar-bg: var(--color-surface);
  --sidebar-ink: var(--color-primary);
  --sidebar-muted: var(--color-text-muted);
  --sidebar-hover: var(--color-tint-hover);
  --sidebar-active-bg: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  --sidebar-bar-width: 3px;
  --nav-row-height: 32px;
  --nav-indent: 12px;                  /* a first-level row's room before its icon */
  --nav-icon: 16px;                    /* a first-level item's icon; its group's guide line comes down from its middle */
  /* Each first-level icon's colour (every one at least 3:1 on white); the organization chart's division colours */
  --nav-icon-home: var(--org-tone-1);           /* blue */
  --nav-icon-chat: var(--org-tone-4);           /* green */
  --nav-icon-projects: var(--org-tone-3);       /* violet */
  --nav-icon-search: var(--org-tone-8);         /* sky */
  --nav-icon-processes: var(--org-tone-6);      /* teal */
  --nav-icon-admin: var(--org-tone-7);          /* indigo */
  --nav-chevron: 14px;                 /* a group's arrow */
  --brand-mark: 26px;                  /* the product's mark beside its name, top left */

  /* Text */
  --color-text: #0d2e4e;               /* headings */
  --color-text-body: #181818;          /* paragraphs */
  --color-text-muted: #666666;         /* 5.5:1 on the page */
  --color-text-inverse: #ffffff;

  /* Error */
  --color-error: #c41010;
  --color-error-bg: #fde4e4;
  --color-on-error-bg: #9b0c0c;

  /* Workflow states - identical everywhere in the product: ink on its tint, every pair at least 4.5:1; a pill's dot may be
     the brighter one */
  --status-running: #004fd6;           /* WorkflowInstances.Status = Running */
  --status-running-bg: #e0eafa;
  --status-pending: #9a4f00;           /* WorkflowSteps.WorkflowStepActionId IS NULL */
  --status-pending-bg: #fff1dc;
  --status-pending-dot: #ff8800;
  --status-overdue: #c41010;           /* DueAt in the past, stuck */
  --status-overdue-bg: #fde4e4;
  --status-completed: #087000;         /* Completed */
  --status-completed-bg: #e4f5e1;
  --status-completed-dot: #22ac14;
  --status-cancelled: #475569;         /* Cancelled */
  --status-cancelled-bg: #eef1f5;

  /* Typography - self-hosted (no CDN), fonts/ */
  --font-heading: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;   /* keys and codes (a ticket's key) */

  --text-display: 32px;     --leading-display: 40px;   /* the numbers on Home's tiles */
  --text-heading-xl: 28px;  --leading-heading-xl: 36px;  /* the page's title */
  --text-heading-lg: 22px;  --leading-heading-lg: 30px;
  --text-heading-md: 18px;  --leading-heading-md: 26px;  /* a section */
  --text-heading-sm: 15px;  --leading-heading-sm: 22px;  /* a card's title */
  --text-body-lg: 16px;     --leading-body-lg: 26px;
  --text-body-md: 14px;     --leading-body-md: 22px;
  --text-body-sm: 13px;     --leading-body-sm: 20px;
  --text-label-md: 14px;    --leading-label-md: 20px;
  --text-label-sm: 12px;    --leading-label-sm: 16px;
  --text-eyebrow: 11px;     --leading-eyebrow: 16px;   /* uppercase, 0.08em tracking */

  /* Spacing - 8pt rhythm */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --page-margin: 48px;
  --page-margin-mobile: 20px;
  --page-max-width: 1280px;

  /* Corners */
  --diagram-height: 360px;               /* <bpm-diagram>: its zoomable box (a whole tree: pan and zoom inside) */
  --diagram-line: 1px solid var(--color-border-hover);  /* <bpm-diagram>: the lines between nodes */
  --diagram-line-gap: 14px;
  --diagram-root: var(--color-primary);  /* <bpm-diagram>: the top node */
  --diagram-group: var(--color-cobalt);  /* <bpm-diagram>: the band of a node with children */
  --diagram-card-width: 140px;          /* <bpm-diagram>: every card the same width */
  --diagram-picture-height: 64px;        /* <bpm-diagram>: the image slot on top of a card */
  --radius-sm: 4px;
  --radius: 6px;                       /* cells, small controls, menu rows */
  --radius-md: 8px;                    /* inputs, menus, popovers */
  --radius-lg: 12px;                   /* cards, modules */
  --radius-xl: 16px;                   /* dialogs, the designers' canvases */
  --radius-full: 9999px;               /* buttons (pills), chips, status pills, avatars */

  /* Buttons (Creatio's pills) */
  --button-height: 36px;
  --button-height-compact: 30px;
  --button-pad: 20px;
  --button-pad-compact: 14px;
  --control-height: 40px;              /* an input */
  --pill-height: 22px;                 /* a chip or a status pill */
  --pill-dot: 6px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(13, 46, 78, 0.06);
  --shadow-2: 0 8px 24px -6px rgba(13, 46, 78, 0.12);
  --shadow-modal: 0 24px 64px -12px rgba(13, 46, 78, 0.28);
  --scrim: rgba(13, 46, 78, 0.45);
  --transition: 0.15s ease;

  /* Organization chart - dense on purpose: hundreds of cards must fit on screen */
  --org-card-width: 168px;
  --org-side-width: 280px;
  --side-toggle-size: 28px;            /* a side panel's fold button, on its inner border at the top */
  --org-line-gap: 14px;                /* vertical room for the connector lines between tree levels */
  --org-line-width: 2px;               /* the connector lines: clearly seen (user, 2026-10-29: 1 px was too thin) */
  --org-line: var(--org-line-width) solid var(--color-border-strong);
  --org-swatch-size: 10px;             /* color-code square in the list section titles and before a list row */
  --org-section-head: 44px;            /* a list section's head on the Organization page */
  --org-arrow: 7px;                    /* its disclosure arrow */
  /* Organization color code - the same in the chart and in the left lists. One cool family
     (navy / cobalt / slate) derived from the brand tokens; orange stays for search and drop only.
     navy = department, cobalt tint = position, plain = person, slate tint = not in the chart */
  --org-department: var(--color-primary);
  --org-on-department: var(--color-text-inverse);
  --org-position: var(--color-cobalt-soft);
  --org-on-position: var(--color-cobalt);
  --org-off-chart: var(--status-cancelled-bg);
  --org-on-off-chart: var(--status-cancelled);
  /* A department's colour in the chart is its division's - the top department under the root it belongs to (Sally,
     2026-10-29, Monday's coloured groups; org-chart.ts → departmentTones). Strong: the department's band, white on it
     ≥ 4.5:1, and its positions' names; tint: its positions' heads. Neighbours alternate warm and cool; the root is navy.
     The colour code stays: a solid band = a department, a tinted head = a position, plain = a person. */
  --org-tone-0: var(--color-primary);  --org-tone-0-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  --org-tone-1: #0058d6;  --org-tone-1-bg: #e3ecfb;   /* blue */
  --org-tone-2: #a15c00;  --org-tone-2-bg: #fff0da;   /* amber */
  --org-tone-3: #6a3de8;  --org-tone-3-bg: #eee8fd;   /* violet */
  --org-tone-4: #1e7b34;  --org-tone-4-bg: #e2f3e5;   /* green */
  --org-tone-5: #b4247a;  --org-tone-5-bg: #fbe5f1;   /* magenta */
  --org-tone-6: #00797a;  --org-tone-6-bg: #ddf3f2;   /* teal */
  --org-tone-7: #3949ab;  --org-tone-7-bg: #e6e9f7;   /* indigo */
  --org-tone-8: #0b6e99;  --org-tone-8-bg: #dff0f7;   /* sky */
  --org-avatar-size: 18px;             /* a person's picture in the chart and the lists */
  /* Administrator mark: yellow corporal chevrons; the darker edge keeps them visible on white */
  /* Designer toolbars: the save status gets this much before it is cut (whole text on hover) */
  --toolbar-status-width: 28ch;
  /* Page designer: the ring around the selected field (on the page and in the list) */
  --page-selected-ring: color-mix(in srgb, var(--color-cobalt) 22%, var(--color-surface));
  /* Page designer's Data panel: a tool to open, not a heading - the cobalt (technical / data) family */
  /* Assignee picker: "request" targets (decided by who started the process) in violet */
  --assignee-request: var(--color-violet);
  --assignee-request-bg: var(--color-violet-soft);
  --picker-row-height: 24px;
  /* Flow designer's right panel: a little wider than the page designer's, its lists hold long names */
  --design-side-width: 320px;
  --picker-list-height: 280px;
  --dialog-width-wide: 540px;
  --org-admin: #facc15;
  --org-admin-edge: #a16207;
  --org-admin-size: 12px;

  /* Process form (task page): narrowest a field gets in the default layout */
  --field-min-width: 240px;

  /* Process flow (instance page; Pipefy): every step state has a color, not reached included.
     The strong color marks the badge, border and taken path; the tint fills the card. */
  --flow-completed: var(--status-completed);
  --flow-completed-bg: var(--status-completed-bg);
  --flow-pending: var(--status-pending);
  --flow-pending-bg: var(--status-pending-bg);
  --flow-overdue: var(--status-overdue);
  --flow-overdue-bg: var(--status-overdue-bg);
  --flow-notreached: var(--status-cancelled);
  --flow-notreached-bg: var(--status-cancelled-bg);
  --flow-line: var(--color-border-hover);  /* a path not taken (yet) */
  /* Designer (Creatio): white step cards on a plain canvas with a strip in their kind's colour (Start orange, a task
     blue); paths a soft blue-grey, the chosen one orange */
  --flow-card-shadow: drop-shadow(0 2px 4px rgba(13, 46, 78, 0.08));
  --flow-design: var(--color-cobalt);
  --flow-design-bg: var(--color-surface);
  --flow-start: var(--color-accent);
  --flow-start-bg: var(--color-surface);
  --flow-path: var(--color-border-strong);
  --flow-path-selected: var(--color-accent);
  --flow-condition: var(--color-cobalt);      /* the "if" mark of a path decided by C# code */
  --flow-on-condition: var(--color-text-inverse);
  --flow-tab-bg: var(--color-surface);        /* an action's tab on a card's right edge: a pill */
  --flow-tab-hover: var(--color-cobalt-soft);
  /* The step's code (pre-work / post-work, a path's If): running = filled cobalt, written but not running = dashed,
     none = grey. Before (On enter) and after (On exit) are told apart by their arrow, not their colour. */
  --code-running: var(--color-cobalt);
  --code-running-ink: var(--color-on-primary);
  --code-written-bg: var(--color-surface);
  --code-none: var(--status-cancelled);
  --code-none-bg: var(--status-cancelled-bg);

  /* Page designer scope: All steps (the shared page) vs one step (changes for that step only).
     The same amber marks everything changed for a step: its tab, its fields, its pieces. */
  --scope-all: var(--color-primary);
  --scope-all-bg: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  --scope-step: var(--status-pending-dot);
  --scope-step-bg: var(--status-pending-bg);
  --scope-on-step: var(--status-pending);
  --scope-frame: 2px;
  --step-picker-height: 300px;            /* the page designer's step picker (the flow, above the page) */
  --table-dialog-width: 760px;            /* the page designer's "+ Add table" dialog */

  /* Work tracking (projects and their tickets). A status's category has one color everywhere it shows: its chip,
     the status button, a card's edge. The names of statuses and types are the customer's; the colors follow the
     three fixed categories, the type's kind and the priority's place (Jira-like colours, Pipefy's coloured columns). */
  --ticket-todo: var(--status-cancelled);
  --ticket-todo-bg: var(--status-cancelled-bg);
  --ticket-todo-dot: #8095b3;
  --ticket-progress: var(--color-cobalt);
  --ticket-progress-bg: var(--color-cobalt-soft);
  --ticket-done: var(--status-completed);
  --ticket-done-bg: var(--status-completed-bg);
  --ticket-done-dot: var(--status-completed-dot);
  --ticket-epic: var(--color-violet);              /* an epic, and the chip of the epic a ticket is under */
  --ticket-epic-bg: var(--color-violet-soft);
  --ticket-standard: var(--color-cobalt);          /* a type's square: a standard ticket, a sub-task, an epic */
  --ticket-subtask: #08697a;
  --ticket-subtask-bg: #dff4f7;
  --ticket-type-mark: 14px;                        /* a type's square, and the sign in it */
  --ticket-type-glyph: 9px;
  --ticket-label: var(--org-tone-3);               /* a label's chip (violet), on the ticket and in the list */
  --ticket-label-bg: var(--org-tone-3-bg);
  --ticket-time-track: var(--color-tint);          /* time tracking: logged against the estimate */
  --ticket-time-done: var(--status-completed-dot);
  --ticket-time-over: var(--color-error);
  --ticket-time-bar: 8px;
  --priority-mark: 10px;                           /* a priority's three bars */
  /* A priority's colour by its place in the list (TicketPriorities.SortOrder; 1 = the most important): red, orange,
     amber, blue, grey - the names stay the customer's */
  --priority-1: var(--color-error);
  --priority-1-bg: var(--color-error-bg);
  --priority-2: var(--color-accent-ink);
  --priority-2-bg: var(--color-accent-soft);
  --priority-3: var(--status-pending);
  --priority-3-bg: var(--status-pending-bg);
  --priority-4: var(--color-cobalt);
  --priority-4-bg: var(--color-cobalt-soft);
  --priority-5: var(--status-cancelled);
  --priority-5-bg: var(--status-cancelled-bg);
  --ticket-warning: var(--status-pending);         /* something on the board needs the project's settings */
  --ticket-warning-bg: var(--status-pending-bg);
  --board-column-width: 288px;
  --board-column-bg: color-mix(in srgb, var(--color-primary) 4%, var(--color-canvas));
  --board-column-edge: 3px;                        /* a column's top line in its category's colour */
  --avatar-size: 24px;                             /* a person shown as initials */
  --profile-picture-size: 112px;                   /* the person's own picture on their Profile */
  --profile-side: 320px;                           /* the Profile's left column: who they are */
  --profile-band: 88px;                            /* the light band over the picture */
  --profile-icon: 40px;                            /* a setting's icon square */
  --avatar-bg: var(--color-cobalt-soft);
  /* A person's initials in one of six colours, always the same for the same person (avatar() in dom.ts) */
  --avatar-1: var(--color-cobalt);         --avatar-1-bg: var(--color-cobalt-soft);
  --avatar-2: var(--color-accent-ink);     --avatar-2-bg: var(--color-accent-soft);
  --avatar-3: var(--color-violet);         --avatar-3-bg: var(--color-violet-soft);
  --avatar-4: var(--status-completed);     --avatar-4-bg: var(--status-completed-bg);
  --avatar-5: var(--status-pending);       --avatar-5-bg: var(--status-pending-bg);
  --avatar-6: var(--ticket-subtask);       --avatar-6-bg: var(--ticket-subtask-bg);
  --ticket-side-width: 340px;                      /* the ticket page's Details column */
  --ticket-thumb-size: 96px;                       /* an attachment's picture */
  --dialog-width-ticket: 560px;                    /* the Create ticket and New project windows */
  --backlog-type-width: 64px;                      /* a backlog row's type, key and epic chip: the titles start in line */
  --backlog-key-width: 80px;
  --backlog-chip-width: 180px;

  /* Chat (channels, direct messages, messages). The unread count is navy like the menu; the "New" line where the
     unread ones start uses the error red the way chat products do (it is a mark, not an alarm). */
  --chat-nav-width: 260px;
  --chat-nav-narrow-height: 220px;                 /* a narrow screen: the sidebar over the channel */
  --chat-nav-bg: var(--color-surface);
  --chat-hover-bg: var(--color-tint-hover);
  --chat-active-bg: var(--sidebar-active-bg);
  --chat-bar-bg: var(--color-tint);
  --chat-unread-bg: var(--color-primary);
  --chat-unread-ink: var(--color-on-primary);
  --chat-badge-size: 18px;
  --chat-icon-button-size: 32px;                   /* the sidebar's box and the Mentions button beside it */
  --chat-new: var(--color-error);
  --chat-typing-height: 18px;
  --chat-browse-height: 420px;
  --message-side-width: 40px;                      /* the writer's initials, or a run's time */
  --composer-max-height: 200px;                    /* the box grows with its text up to this, then scrolls */
  --composer-compact-max-height: 120px;            /* the compact box (a meeting's chat): a few lines, then it scrolls */
  --composer-icon-size: 32px;                      /* 📎 and ➤ in the compact box */
  --chat-side-width: 380px;                        /* the right panel: a thread, pinned messages, mentions, search */
  --chat-mention: var(--color-cobalt);             /* "@Name" in a message */
  --chat-mention-bg: color-mix(in srgb, var(--color-cobalt) 10%, var(--color-surface));
  --chat-mention-me: var(--status-pending);        /* "@" the reader, and a message that mentions them */
  --chat-mention-me-bg: color-mix(in srgb, var(--status-pending) 14%, var(--color-surface));
  --chat-mentioning-bg: color-mix(in srgb, var(--status-pending) 6%, var(--color-surface));
  --chat-mention-badge-bg: var(--color-error);     /* a channel's unread messages that mention the reader */
  --chat-highlight-bg: color-mix(in srgb, var(--status-pending) 20%, var(--color-surface)); /* the message a hit opened at */
  --chat-reaction-bg: var(--color-tint);
  --chat-reaction-mine-bg: color-mix(in srgb, var(--color-cobalt) 14%, var(--color-surface));
  --chat-reaction-mine-edge: var(--color-cobalt);
  --chat-pinned: var(--status-pending);
  --chat-image-size: 220px;                        /* an image attached to a message, at most this wide and tall */
  --mention-menu-width: 300px;
  --presence-available: var(--status-completed-dot); /* a person's status dot: online and available */
  --presence-busy: var(--color-error);             /* busy (not available) */
  --presence-away: var(--status-pending-dot);      /* away (chosen, or nothing done for a while) */
  --presence-away-ink: var(--status-pending);      /* "Away" written beside a name: readable on light */
  --presence-dot-size: 9px;
  --chat-muted: var(--color-text-muted);           /* a muted conversation in the sidebar */
  --nav-badge-bg: var(--color-error);              /* the menu's Chat item: messages for the person */
  --nav-badge-ink: var(--color-on-primary);
  --nav-dot: var(--color-cobalt);                  /* ...or only other unread ones */
  --nav-dot-size: 8px;
  --meeting-card-bg: color-mix(in srgb, var(--color-cobalt) 6%, var(--color-surface)); /* a meeting's card in a conversation */
  --meeting-card-width: 440px;
  --meeting-tile-bg: color-mix(in srgb, var(--color-cobalt) 10%, var(--color-surface)); /* a person's place on the stage */
  --meeting-speaking: var(--status-completed);     /* the edge of the one speaking */
  --meeting-preview-width: 520px;                  /* the camera's picture before going in */
  --meeting-main-min-height: 220px;                /* the large one is never squeezed lower than this */
  --meeting-small-width: 220px;                    /* a small one (16:9) on the strip */
  --meeting-small-min-width: 140px;                /* ...never narrower: fewer go on a page instead */
  --meeting-face-size-small: 40px;                 /* initials on a small one */
  --meeting-face-size: 72px;                       /* initials when there is no picture */
  --meeting-side-width: 340px;                     /* the room's side panel: its people, its chat */
  --meeting-hand: var(--status-pending);           /* a raised hand */
  --meeting-hand-bg: var(--status-pending-bg);
  --meeting-host: var(--color-cobalt);             /* "Host" beside a name */
  --meeting-quality-good: var(--status-completed); /* the connection's bars */
  --meeting-quality-poor: var(--status-pending);
  --meeting-quality-lost: var(--color-error);
  --meeting-quality-off: var(--color-border-hover);
  --meeting-reaction-size: 40px;                   /* an emoji floating up from a person's place */
  --meeting-reaction-rise: 120px;                  /* how far it floats up */
  --meeting-bars-height: 12px;                     /* a connection's three bars */
  --meeting-bar-width: 3px;
  --meeting-popover-width: 300px;                  /* the reactions and the devices, over the controls */
  --meeting-knock-bg: var(--status-pending-bg);    /* the people at the door */
  --notice-width: 400px;                           /* the notifications' panel, under the person's picture */
  --notice-bell: #e07b00;                          /* the bell of Notifications in the user menu (amber) */
  --notice-unread-bg: color-mix(in srgb, var(--color-cobalt) 6%, var(--color-surface)); /* one since the last look */
  --notice-unread-edge: var(--color-cobalt);
  --notice-toast-width: 360px;                     /* a new one, in the screen's corner */
  --address-notice: var(--status-pending);         /* the server's address is missing or not where the page is open */
  --address-notice-bg: var(--status-pending-bg);
  --address-notice-width: 720px;
  --topbar-height: 56px;                           /* a page's top bar; the user menu sits in its middle */
  --user-menu-size: 36px;                          /* the signed-in person's button, top right on every page */
  --user-menu-width: 288px;                        /* its panel */
  --user-menu-reserve: calc(var(--user-menu-size) + 2 * var(--space-md)); /* the room a top bar leaves it */
  --user-qr-size: 184px;                           /* two-step sign-in's QR code */
  --auth-card-width: 400px;                        /* the sign-in and password pages */

  /* Focus: an orange ring (3.5:1 on white); an input's line turns navy inside it */
  --focus-outline: 2px solid var(--color-accent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}