/* DeepCurrent Design System — generated from tokens.json */
:root, [data-theme="dark"] {
  --dc-navy-950: #000612; /* Page background (surface-page), the deepest ground. text-100 to text-400 read on it. */
  --dc-navy-900: #000a1a; /* Left rail, top bar and footer bar ground (surface-rail, surface-topbar, surface-footer). */
  --dc-navy-850: #010f21; /* Outer panel ground (surface-panel). */
  --dc-navy-800: #021223; /* Card ground inside panels (surface-card). */
  --dc-navy-750: #061628; /* Inset wells and input fields (surface-inset). */
  --dc-navy-700: #0c1f33; /* Hover fill for rows and controls (surface-hover). Every text token passes 4.5:1 on it. */
  --dc-navy-650: #122841; /* Unfilled track of gauges and progress bars. */
  --dc-navy-600: #1c2b3f; /* Hairline border between surfaces (border-subtle), the pending step line, neutral badge border. 1.4:1 against navy-950: a quiet divider, not a control border. */
  --dc-navy-500: #2a3b52; /* Former control-border navy; border-strong now uses navy-300 to clear 3:1. Kept for dividers that carry no meaning. */
  --dc-navy-400: #3d5372; /* Navy step between navy-500 and navy-300. No component uses it yet; keep for large dividers, never text or control edges. */
  --dc-navy-300: #5c718d; /* Control borders in the dark theme (border-strong): 3.3 to 4.1:1 on navy-700 to navy-950, above the 3:1 floor for control edges. From the previous DeepCurrent system. */
  --dc-current-200: #b6f1e7; /* Palest Current Green: highlights and glow cores in illustration. Not a text colour on light ground. */
  --dc-current-300: #6fe0cd; /* Primary action hover (action-primary-bg-hover), link hover and selected tab text in the dark theme. Deep Ocean on it 9.7:1. */
  --dc-current-400: #1fc7ae; /* Current Green, the one hero hue, set toward Apple's mint (hue 171): primary action fill, eyebrows, links, active rail item, focus ring, live marks, the wordmark's "Current" and the DC mark in the dark theme. 7.8:1 or more on every dark surface; Deep Ocean on it 7.2:1. */
  --dc-current-600: #118b78; /* Light theme primary action edge (action-primary-border): 4.2:1 on white, 3.8:1 on panel grey, 3.5:1 on inset. Also gradient stops and chart fills. Not a text colour. */
  --dc-current-700: #0e7667; /* Current Green for light grounds: accent text, links, checked controls, the focus ring. 5.5:1 on white, 5.0:1 on panel grey, 4.6:1 on inset; white on it 5.5:1. In the dark theme, the voice bar's resting waveform. */
  --dc-current-800: #0a574c; /* Deepest Current Green: selected tab, live label and link hover text in the light theme. 7.5:1 or more on every light surface. */
  --dc-ocean: #0b2545; /* Deep Ocean, the brand navy: the logo's dark half on light grounds, text on Current Green fills (7.2:1), secondary action text and link hover in light, dark slide ground, and Mission 0 in the light theme. */
  --dc-blue-500: #0c9cfb; /* Blue for highlights only (v81): the faint light on surface edges and the selection rim's blue component. Never a status, a button fill or text. (Running was this blue until v80; it is Current Green now.) */
  --dc-blue-400: #4fb4ff; /* The keyboard focus ring in the dark theme (dc-focus-color, dc-focus-ring): 7.39 to 8.99:1 on navy-950 to navy-700. Blue is for focus and surface edge light only, never a status, a button fill or text. */
  --dc-green-500: #30d158; /* Status Success (Done): Apple's system green (dark). Dot, border and text on navy-950 to navy-700 (6.8:1 or more, on its tint too). Hue 135, 36 degrees from Current Green (171), so Done reads as success, not as the brand accent. Always paired with the word Done or a check. */
  --dc-green-400: #6ee38a; /* Lighter Done green for text on tinted status fills (8.5:1 or more). */
  --dc-amber-500: #f8a606; /* Status Review (Waiting on you): dot, border and text on navy-950 to navy-700 (8.3 to 10.1:1). Amber is reserved for Waiting on you, which includes every clean stop. Always paired with a word or clock icon. */
  --dc-amber-400: #ffc24d; /* Lighter Review amber for text on tinted status fills. */
  --dc-red-500: #f22d21; /* Status Blocked, reserved for true failure (work cannot continue until it is fixed): dot and border on any dark surface. As text it is 4.65 to 5.0:1 on navy-950 to navy-800 but 4.49:1 on navy-750 and 4.11:1 on navy-700, so use red-400 on inset and hover grounds. */
  --dc-red-400: #ff6a60; /* Lighter Blocked red for text on inset, hover and tinted grounds (5.94 to 7.23:1 on navy-950 to navy-700). */
  --dc-text-100: #f2f6fb; /* Headings and primary values (text-heading) on navy-950 to navy-700: 15.4 to 18.7:1. */
  --dc-text-200: #c8d6e6; /* Body copy (text-body) on navy-950 to navy-700: 11.3 to 13.7:1. */
  --dc-text-300: #a9bbd0; /* Secondary and muted copy (text-muted), ghost action text, on navy-950 to navy-700: 8.5 to 10.4:1. */
  --dc-text-400: #90a3b9; /* Subtle labels, meta lines, placeholders, neutral status (text-subtle). 6.45 to 7.85:1 on navy-700 to navy-950: passes 4.5:1 on every dark surface, hover included. */
  --dc-text-500: #4c5f77; /* Disabled text (text-disabled) only. 2.55 to 3.1:1 on navy-950 to navy-700, below 4.5:1 as in the source; never for content that must be read. */
  --dc-a-current-08: rgba(31,199,174,.08); /* Faintest Current Green tint: hover wash on accented rows. */
  --dc-a-current-14: rgba(31,199,174,.14); /* Current Green tint fill for active step markers and the voice bar's listening ring. */
  --dc-a-current-24: rgba(31,199,174,.24); /* Mid Current Green alpha for outlines of accented tiles. */
  --dc-a-current-40: rgba(31,199,174,.4); /* Accent border (border-accent) and the first ring of glow-accent. */
  --dc-a-blue-08: rgba(12,156,251,.08); /* Blue edge light at 8%: the Navy Glass recess edge and hairline. Never a fill for a button or a status. */
  --dc-a-blue-16: rgba(12,156,251,.16); /* Blue tint between the 8% hover fill and the 28% border. No component uses it yet. */
  --dc-a-blue-28: rgba(12,156,251,.28); /* Blue edge light at 28%: the glass top highlight and the secondary action's hairline. An edge, never a fill. */
  --dc-a-green-10: rgba(48,209,88,.1); /* Success tint fill (status-success-bg): badges, panels, the Approve for Send button. */
  --dc-a-green-28: rgba(48,209,88,.28); /* Success border (status-success-border). */
  --dc-a-amber-10: rgba(248,166,6,.1); /* Review tint fill (status-review-bg): badges, exception panels, the Hold button. */
  --dc-a-amber-32: rgba(248,166,6,.32); /* Review border (status-review-border). */
  --dc-a-red-10: rgba(242,45,33,.1); /* Blocked tint fill (status-blocked-bg): badges, blocked panels, the Reject button. */
  --dc-a-red-30: rgba(242,45,33,.3); /* Blocked border (status-blocked-border). */
  --dc-a-white-04: rgba(255,255,255,.04); /* Neutral status fill (status-neutral-bg) and inner top highlight on cards. */
  --dc-a-white-08: rgba(255,255,255,.08); /* Stronger white hairline over dark fills. */
  --dc-a-white-05: rgba(255,255,255,.05); /* Glass fill for cards (surface-card) and inner rows (surface-raised at .06): a faint white film over the deep ground, so a surface reads as glass, not as a lighter navy block. */
  --dc-a-white-06: rgba(255,255,255,.06); /* Glass fill for outer panels (surface-panel) and raised rows (surface-raised). Higher reads lighter: a row on a panel is this step over the panel. */
  --dc-a-white-10: rgba(255,255,255,.10); /* Glass hover fill (surface-hover) and the rim of a tile inside a card. */
  --dc-a-white-14: rgba(255,255,255,.14); /* The glass rim: the 1px edge of every panel, card and callout (border-card). Crisp against the ground, quiet against the fill. */
  --dc-a-white-16: rgba(255,255,255,.16); /* The top highlight: the 1px inset line along the upper edge of every glass surface (dc-shadow-card, dc-shadow-panel), the light catching the pane. */
  --dc-a-white-22: rgba(255,255,255,.22); /* Rim of a control that sits directly on the ground (the account button, the nav pill) and of a dashed placeholder outline. */
  --dc-paper: #f5f7fa; /* Former light theme page ground. The light page is now white (dc-surface-light); kept as a cool off-white for print and slide backgrounds that need one. */
  --dc-surface-light: #ffffff; /* Light theme ground for the page, rail, top bar, footer and raised rows: clean white, as in a print layout. */
  --dc-panel-light: #f4f6f9; /* Light theme panel and card fill: a cool grey block on the white page, with no outline and no shadow. The block's fill is its edge. Every text token passes 4.5:1 on it. */
  --dc-inset-light: #e9edf3; /* Light theme inset wells, inputs, hover fill and the neutral badge fill: one step darker than the panel grey, so a field reads inside a grey card. Every text token passes 4.5:1 on it (text-subtle 4.9:1). */
  --dc-blue-700: #1a5c94; /* The keyboard focus ring in the light theme (dc-focus-color, dc-focus-ring): 6.0:1 or more on every light surface. Never a status, a button fill or text. */
  --dc-green-700: #117236; /* Light theme Success (Done): text. 5.2:1 or more on every light surface and on dc-green-100. */
  --dc-amber-700: #8a5008; /* Light theme Review (Waiting on you): dot, border and text. 5.8:1 on dc-amber-100. */
  --dc-red-700: #932019; /* Light theme Blocked: dot, border and text. 7.2:1 on dc-red-100. */
  --dc-blue-600: #1a7fd6; /* Light-theme blue edge light. Not a text colour and never a status (Running moved to Current Green in v81). */
  --dc-green-600: #1c9344; /* Light theme Success mark (status-success-solid): dots, rings, progress fills. 3.9:1 on white, 3.6:1 on panel grey, 3.3:1 on inset, 3.4:1 on its tint. Not a text colour. */
  --dc-amber-600: #b97800; /* Light theme Review mark (status-review-solid): the Waiting on you dot, rings and bars. 3.6:1 on white, 3.3:1 on panel grey, 3.1:1 on inset, 3.2:1 on its tint. Not a text colour. */
  --dc-red-600: #d93025; /* Light theme Blocked mark (status-blocked-solid): dots, rings and bars. 4.7:1 on white, 4.4:1 on panel grey, 4.0:1 on inset, 4.0:1 on its tint. Not a text colour. */
  --dc-blue-300: #98c5ed; /* Light-theme blue hairline in the selection rim mix. Decorative; never a status. */
  --dc-green-300: #a8dcb5; /* Light theme Success border (status-success-border). Decorative. */
  --dc-amber-300: #e0c28c; /* Light theme Review border (status-review-border): the Waiting on you chip, Hold option and review panels. Decorative. */
  --dc-red-300: #eea29d; /* Light theme Blocked border (status-blocked-border): Blocked chips, Reject option and blocked panels. Decorative. */
  --dc-blue-100: #e4eff8; /* Light theme selected surface (surface-selected): the selection highlight on white. Never a status or a button fill. */
  --dc-green-100: #e3f4e7; /* Light theme Success fill. */
  --dc-amber-100: #fbf0dc; /* Light theme Review fill. */
  --dc-red-100: #fbe7e5; /* Light theme Blocked fill. */
  --dc-border-subtle-light: #e3e8ef; /* Light theme hairline: rules between rows, around white raised rows inside grey panels, and the rail and top bar edges. Decorative: below 3:1 by design. */
  --dc-border-strong-light: #cdd5de; /* Former light card outline. Light panels and cards now have no outline (border-card is the panel fill); kept for dividers that need more weight than a hairline. */
  --dc-border-functional-light: #6e7a88; /* Light theme control borders and outline buttons (border-strong): 4.3:1 on white, 4.0:1 on panel grey, 3.7:1 on inset. */
  --dc-ink-muted-light: #45526a; /* Light theme secondary copy (text-muted): cool slate, 7.3:1 on panel grey, 6.7:1 on inset. */
  --dc-ink-subtle-light: #5b6778; /* Light theme labels, meta lines and the grey half of a two-tone headline (text-subtle): 5.7:1 on white, 5.3:1 on panel grey, 4.9:1 on inset. */
  --dcs-slide-dark: var(--dc-ocean); /* Ground of dark slides (Title, Dark Authority, Closing): Deep Ocean. Slides only; the product console uses navy-950. */
  --dcs-slide-dark-panel: #12325a; /* Panel fill on dark slides, one step lighter than Deep Ocean. slide-dark-body on it: 7.6:1. */
  --dcs-slide-dark-border: #27497a; /* Panel border on dark slides. 1.7:1 against slide-dark: decorative. */
  --dcs-slide-dark-body: #b8cad6; /* Body text on dark slides: 9.1:1 on slide-dark, 7.6:1 on slide-dark-panel. */
  --dcs-slide-dark-muted: #8ea6b8; /* Muted text on dark slides: 6.1:1 on slide-dark, 5.1:1 on slide-dark-panel. */
  --dcs-slide-accent: var(--dc-current-400); /* Slide accent, the same Current Green as the product: eyebrows, marks, rules and the Closing call to action on dark slides. 7.2:1 on slide-dark, 6.0:1 on slide-dark-panel; 2.1:1 on slide-paper, so never text on white. */
  --dcs-slide-accent-tint: #e0f5f1; /* Tint behind accent chips and eyebrows on light slides; text on it is slide-accent-ink. */
  --dcs-slide-accent-ink: var(--dc-current-700); /* Current Green for text on light slides: eyebrows and chip text. 5.5:1 on slide-paper, 4.9:1 on slide-accent-tint. */
  --dcs-slide-ink: var(--dc-ocean); /* Headings on light slides: Deep Ocean, 15.4:1 on slide-paper. */
  --dcs-slide-muted: #5d6b78; /* Body text on light slides: 5.47:1 on slide-paper. */
  --dcs-slide-faint: #91a0ad; /* Footer text on light slides. 2.68:1 on slide-paper misses 4.5:1; kept as sampled from the deck. */
  --dcs-slide-paper: #ffffff; /* Ground of light slides. */
  --dcs-slide-wash: #d8e0e7; /* Card border on light slides. 1.33:1 against slide-paper: a decorative hairline. */
  --dcs-slide-amber-tint: #fff2cc; /* Chip fill on slides (Dark Authority); text on it is slide-amber-ink. */
  --dcs-slide-amber-ink: #7a5100; /* Text on slide-amber-tint: 6.27:1. */
  --dcs-slide-red: #b42318; /* Alert red on light slides: 6.57:1 on slide-paper. No slide uses it yet. */
  --surface-page: var(--dc-navy-950); /* Page background for every Command screen. Body copy is text-body. */
  --surface-rail: var(--dc-a-white-04); /* Left navigation rail. Dark: the faintest glass film over the ground. Light: white. */
  --surface-panel: var(--dc-a-white-06); /* Outer panels on surface-page. Dark: glass, a 6% white film over the deep ground with the --dc-wash-card top-lit gradient, border-card rim and dc-shadow-panel. Light: the flat cool-grey block. */
  --surface-card: var(--dc-a-white-05); /* Cards inside panels. Dark: glass, a 5% white film that stacks on the panel beneath it, so it reads one step lighter. Light: the flat cool-grey block. */
  --surface-feature: var(--dc-ocean); /* The featured block: Deep Ocean in both themes, drawn as a dark island (Panel tone="feature") with a soft Current Green and blue glow. One per screen, for the thing that matters most: the decision, the hero or the quote. On the white light page it is the reference's dark card among grey ones. */
  --surface-inset: rgba(0,6,18,.45); /* Inputs, wells and tracks inside cards: the sunken ground. Dark: a 45% deep-ocean film, darker than the glass around it. Light: the cool inset grey. Rows and tiles that sit on a panel use surface-raised. */
  --surface-raised: var(--dc-a-white-06); /* Rows, tiles and option rows that sit on a panel. Dark: a 6% white film over the panel (higher reads lighter). Light: white with a border-subtle hairline. Inputs and wells stay surface-inset, which sinks in both themes. */
  --surface-hover: var(--dc-a-white-10); /* Hover fill for rows, tabs and controls: one step more glass. Every text token passes 4.5:1 on it. */
  --surface-selected: rgba(12,156,251,.12); /* Selected row, option and nav item (blue tint). */
  --surface-topbar: var(--dc-a-white-04); /* Top bar, 64px. Dark: the faintest glass film. Light: white. */
  --surface-footer: rgba(0,10,26,.88); /* Governance footer bar, 44px. Dark: a near-solid deep-ocean band, the one surface that is not glass, so the governance line always sits on a steady ground. Light: white. */
  --text-heading: var(--dc-text-100); /* Headings and key values on surface-page, surface-panel, surface-card and surface-inset. */
  --text-body: var(--dc-text-200); /* Body copy on surface-page, surface-panel, surface-card and surface-inset. */
  --text-muted: var(--dc-text-300); /* Secondary copy on every surface, surface-hover included. */
  --text-subtle: var(--dc-text-400); /* Labels, meta and placeholders on every surface. Dark: 6.45:1 or more; light: cool slate, 4.9:1 or more. */
  --text-disabled: var(--dc-text-500); /* Disabled controls only. Below 4.5:1, as in the source. */
  --text-accent: var(--dc-current-400); /* Eyebrows and accent text on surface-page to surface-hover. Dark Current Green (7.8:1 or more); light current-700 (4.9:1 or more). */
  --text-link: var(--dc-current-400); /* Links on every surface. */
  --text-link-hover: var(--dc-current-300); /* Link hover. */
  --text-on-accent: var(--dc-ocean); /* Text and icons on action-primary-bg (Current Green): Deep Ocean, 7.2:1. Never on a dark surface. */
  --border-subtle: var(--dc-a-white-08); /* Default hairline between surfaces. Dark: an 8% white line. Light: the pale cool hairline. */
  --border-card: var(--dc-a-white-14); /* Card and panel outline: the glass rim, a 14% white line in the dark theme. Light: the panel fill itself, so cards show no outline; the grey block on white is the edge. */
  --border-strong: var(--dc-navy-300); /* Control borders: inputs, empty checkboxes and radios, outline chips, pending step rings. Dark navy-300 (3.3:1 or more on every dark surface); light functional grey (3.7:1 or more). */
  --border-accent: var(--dc-a-current-40); /* Accent outline on active tiles and selected cards. */
  --action-primary-bg: var(--dc-current-400); /* Primary action fill, Current Green; text on it is action-primary-fg (Deep Ocean). One per screen. */
  --action-primary-bg-hover: var(--dc-current-300); /* Primary action hover. */
  --action-primary-fg: var(--text-on-accent); /* Label and icon on action-primary-bg and its hover. */
  --action-primary-border: var(--dc-current-400); /* Primary action edge. Dark: the fill's own colour, so no visible edge; the accent glow carries it. Light: current-600, so the fill keeps a crisp edge on white (4.2:1) and panel grey (3.8:1). */
  --action-secondary-border: var(--dc-a-blue-28); /* Secondary action border. */
  --action-secondary-fg: var(--dc-text-100); /* Secondary action label on surface-page to surface-inset. */
  --action-secondary-bg-hover: var(--dc-a-white-08); /* Secondary action hover fill. Neutral: blue is never a button fill (v81). */
  --action-ghost-fg: var(--dc-text-300); /* Ghost action label. */
  --status-active: var(--dc-current-400); /* Active (Running): icons and text on page, panel and card grounds, in Current Green since v81 (Andrew, 26 Oct; DEE-25, DEE-26). Dots, rings and bars use status-active-solid; text on its tint uses status-active-text. Running is told from Done by shape as well as hue: a ring with a lit centre, never Done's solid dot. */
  --status-active-bg: var(--dc-a-current-08); /* Active badge and panel fill: a Current Green tint (current-200 in light, opaque, so the text on it holds 6.7:1). */
  --status-active-border: var(--dc-a-current-24); /* Active badge and panel border: a soft Current Green hairline (current-300 in light), so tinted panels and chips read as tints, not outlined boxes. */
  --status-success: var(--dc-green-500); /* Success: icons and text on page, panel and card grounds. Dots, rings and bars use status-success-solid; text on its tint uses status-success-text. */
  --status-success-bg: var(--dc-a-green-10); /* Success badge and panel fill. */
  --status-success-border: var(--dc-a-green-28); /* Success badge and panel border. Light: the 300 tone, a soft hairline like the dark theme's 28 to 32% border, so tinted panels and chips read as tints, not outlined boxes. */
  --status-review: var(--dc-amber-500); /* Review: icons and text on page, panel and card grounds. Dots, rings and bars use status-review-solid; text on its tint uses status-review-text. */
  --status-review-bg: var(--dc-a-amber-10); /* Review badge and panel fill. */
  --status-review-border: var(--dc-a-amber-32); /* Review badge and panel border. Light: the 300 tone, a soft hairline like the dark theme's 28 to 32% border, so tinted panels and chips read as tints, not outlined boxes. */
  --status-blocked: var(--dc-red-500); /* Blocked: icons on page, panel and card grounds. Text uses status-blocked-text, because red-500 is 4.49:1 on navy-750 and 4.1:1 on navy-700; dots, rings and bars use status-blocked-solid. */
  --status-blocked-bg: var(--dc-a-red-10); /* Blocked badge and panel fill. */
  --status-blocked-border: var(--dc-a-red-30); /* Blocked badge and panel border. Light: the 300 tone, a soft hairline like the dark theme's 28 to 32% border, so tinted panels and chips read as tints, not outlined boxes. */
  --status-neutral: var(--dc-text-400); /* Waiting or pending: dot and text on surface-page to surface-inset. */
  --status-neutral-bg: var(--dc-a-white-04); /* Neutral badge fill. */
  --status-neutral-border: var(--dc-navy-600); /* Neutral badge border. */
  --office-revenue: #bfe45a; /* Revenue Office identity tone (chartreuse): the document glyph; the brightest tone in the set, the office that brings the deal. Yellow-green, a full step away from Done green and from Current Green. The glyph, the tile rim, a lit OfficePyramid and its sparks take it. Revenue, Operations and Finance are the three greens, Talent and Legal & Risk the two blues; each is set apart from the status marks by hue, lightness and saturation, and colour alone never carries state. 3:1 or more on every surface in both themes; never body text. */
  --office-revenue-bg: #bfe45a29; /* Revenue Office tile fill: the office tone at 16% (12% in light). The office identity tile in ListRow, OfficeSymbol variant="tile" and the OfficeRing labels. */
  --office-revenue-border: #bfe45a80; /* Revenue Office tile rim: the office tone at 50% (45% in light). Rims the identity tile; a lit OfficePyramid footprint uses it too. */
  --office-operations: #86d65a; /* Operations Office identity tone (fern): the stacked-bars glyph; machinery, the working green. Yellower and softer than the Done mark, which is the saturated system green. The glyph, the tile rim, a lit OfficePyramid and its sparks take it. Revenue, Operations and Finance are the three greens, Talent and Legal & Risk the two blues; each is set apart from the status marks by hue, lightness and saturation, and colour alone never carries state. 3:1 or more on every surface in both themes; never body text. */
  --office-operations-bg: #86d65a29; /* Operations Office tile fill: the office tone at 16% (12% in light). The office identity tile in ListRow, OfficeSymbol variant="tile" and the OfficeRing labels. */
  --office-operations-border: #86d65a80; /* Operations Office tile rim: the office tone at 50% (45% in light). Rims the identity tile; a lit OfficePyramid footprint uses it too. */
  --office-finance: #93ecc4; /* Finance Office identity tone (mint): the coins glyph; the ledger, a pale cool green. Lighter and greyer than Current Green, which stays the saturated accent for live marks and actions. The glyph, the tile rim, a lit OfficePyramid and its sparks take it. Revenue, Operations and Finance are the three greens, Talent and Legal & Risk the two blues; each is set apart from the status marks by hue, lightness and saturation, and colour alone never carries state. 3:1 or more on every surface in both themes; never body text. */
  --office-finance-bg: #93ecc429; /* Finance Office tile fill: the office tone at 16% (12% in light). The office identity tile in ListRow, OfficeSymbol variant="tile" and the OfficeRing labels. */
  --office-finance-border: #93ecc480; /* Finance Office tile rim: the office tone at 50% (45% in light). Rims the identity tile; a lit OfficePyramid footprint uses it too. */
  --office-talent: #86a4ff; /* Talent Office identity tone (cornflower): the person glyph; people, a soft violet-blue. Visibly warmer and paler than the blue of the focus ring; no status is blue. The glyph, the tile rim, a lit OfficePyramid and its sparks take it. Revenue, Operations and Finance are the three greens, Talent and Legal & Risk the two blues; each is set apart from the status marks by hue, lightness and saturation, and colour alone never carries state. 3:1 or more on every surface in both themes; never body text. */
  --office-talent-bg: #86a4ff29; /* Talent Office tile fill: the office tone at 16% (12% in light). The office identity tile in ListRow, OfficeSymbol variant="tile" and the OfficeRing labels. */
  --office-talent-border: #86a4ff80; /* Talent Office tile rim: the office tone at 50% (45% in light). Rims the identity tile; a lit OfficePyramid footprint uses it too. */
  --office-legal: #9ec2e6; /* Legal & Risk Office identity tone (steel): the shield glyph; the impartial one, a desaturated steel blue, the quietest tone in the set. The glyph, the tile rim, a lit OfficePyramid and its sparks take it. Revenue, Operations and Finance are the three greens, Talent and Legal & Risk the two blues; each is set apart from the status marks by hue, lightness and saturation, and colour alone never carries state. 3:1 or more on every surface in both themes; never body text. */
  --office-legal-bg: #9ec2e629; /* Legal & Risk Office tile fill: the office tone at 16% (12% in light). The office identity tile in ListRow, OfficeSymbol variant="tile" and the OfficeRing labels. */
  --office-legal-border: #9ec2e680; /* Legal & Risk Office tile rim: the office tone at 50% (45% in light). Rims the identity tile; a lit OfficePyramid footprint uses it too. */
  --accent: var(--dc-current-400); /* Accent for fills, strokes, icons and live marks: checked toggles and boxes, the focused field border, progress fills, the active tab underline. Dark Current Green; light current-700 (5.0:1 on panel grey, 4.6:1 on inset). */
  --accent-fg: var(--dc-ocean); /* Glyphs and knobs on an accent fill: Deep Ocean on Current Green (7.2:1), white on current-700 (5.5:1). */
  --brand-mark-top: var(--dc-current-400); /* The DeepCurrent mark's D. Current Green on dark grounds; Deep Ocean on light ones, as in the two-tone logo. */
  --brand-mark-bottom: var(--dc-current-400); /* The DeepCurrent mark's C, and the end of the blend through its crossing stroke. Current Green in both themes. */
  --text-accent-strong: var(--dc-current-300); /* Selected tab, live label and active step text: 12:1 or more in dark, 7.5:1 or more in light. */
  --status-active-text: var(--dc-current-300); /* Active text on its tint and on any surface (badges, panels, rows): current-300 in dark, current-800 in light. */
  --status-success-text: var(--dc-green-400); /* Success text on its tint and on any surface. */
  --status-review-text: var(--dc-amber-400); /* Review (Waiting on you) text on its tint and on any surface. */
  --status-blocked-text: var(--dc-red-400); /* Blocked text on its tint and on any surface: 5.9:1 or more in dark, 7.2:1 in light. */
  --status-active-solid: var(--dc-current-400); /* Active as a mark: the Running ring, progress fill, gauge ring and step marker. Never text. 3:1 or more on every surface and on its tint, in both themes. */
  --status-success-solid: var(--dc-green-500); /* Success as a mark: the status dot, progress fill, gauge ring and done step. Never text. 3:1 or more on every surface and on its tint. */
  --status-review-solid: var(--dc-amber-500); /* Review as a mark: the Waiting on you dot, attention dots, the urgent deadline bar. Never text. 3:1 or more on every surface and on its tint. */
  --status-blocked-solid: var(--dc-red-500); /* Blocked as a mark: the status dot, blocked step and gauge ring. Never text. 3:1 or more on every surface and on its tint. */
  --status-neutral-solid: var(--status-neutral); /* Neutral as a mark: connection and availability dots. Alias of status-neutral. */
  --surface-track: var(--dc-navy-650); /* Unfilled track of progress bars and gauges; always quieter than the fill. */
  --status-running: var(--status-active); /* Mission status Running: the dot beside neutral ink. Alias of status-active. */
  --status-waiting: var(--status-review); /* Mission status Waiting on you as an icon colour. Alias of status-review. Text uses status-waiting-text; the dot and the urgent deadline bar use status-waiting-solid. */
  --status-waiting-bg: var(--status-review-bg); /* Waiting on you chip, flag and badge fill. */
  --status-waiting-border: var(--status-review-border); /* Waiting on you chip, flag and badge border. */
  --status-done: var(--status-success); /* Mission status Done: the dot beside neutral ink. Alias of status-success. */
  --status-failed: var(--status-blocked); /* Mission status Failed: dot and text. Alias of status-blocked. Failed is the one customer-facing word for red, for true failure only. */
  --status-failed-bg: var(--status-blocked-bg); /* Failed chip fill. */
  --status-failed-border: var(--status-blocked-border); /* Failed chip border. */
  --status-running-solid: var(--status-active-solid); /* Running dot and progress fill. Alias of status-active-solid. */
  --status-running-text: var(--status-active-text); /* Running as text, on any surface or its tint. Alias of status-active-text. */
  --status-waiting-solid: var(--status-review-solid); /* Waiting on you dot, nav attention dot and urgent deadline bar. Alias of status-review-solid. */
  --status-waiting-text: var(--status-review-text); /* Waiting on you as text: chip labels, nav counts, the at-stake line. Alias of status-review-text. */
  --status-done-solid: var(--status-success-solid); /* Done dot and completed fill. Alias of status-success-solid. */
  --status-done-text: var(--status-success-text); /* Done as text. Alias of status-success-text. */
  --status-failed-solid: var(--status-blocked-solid); /* Failed dot. Alias of status-blocked-solid. */
  --status-failed-text: var(--status-blocked-text); /* Failed as text. Alias of status-blocked-text. */
  --tutorial-spotlight: var(--dc-text-100); /* Mission 0 spotlight ring and the current quest-log step: white on navy, Deep Ocean on light grounds. Never Current Green (the primary action) and never a status colour. */
  --tutorial-mask: rgba(0,6,18,.72); /* Mission 0 mask over everything but the target. Inert text under it drops below 3:1 by design. */
  --tutorial-coach-surface: var(--surface-hover); /* Coach card ground. */
  --tutorial-coach-border: var(--border-card); /* Coach card border. */
  --tutorial-coach-text: var(--text-heading); /* Coach card instruction. */
  --tutorial-coach-step: var(--dc-text-100); /* Coach card step label: 15:1 or more in both themes. */
  --tutorial-win-surface: var(--surface-hover); /* Win state ground. */
  --tutorial-win-accent: var(--dc-text-100); /* Win mark fill. */
  --tutorial-win-accent-fg: var(--dc-ocean); /* The check on the win mark: 14:1 or more. */
  --tutorial-win-accent-text: var(--dc-text-100); /* Win state accent text. */
  --dc-shadow-card: 0 1px 0 rgba(255,255,255,.16) inset,0 24px 64px rgba(0,2,10,.6); /* Panels and cards. Dark: the glass top highlight (a 1px inset white line at 16%) plus a deep soft drop into the ocean; depth reads through the rim, the highlight and the lighter film first. Light: none. Grey blocks on a white page are flat; fill carries depth. */
  --dc-shadow-panel: 0 1px 0 rgba(255,255,255,.16) inset,0 28px 72px rgba(0,2,10,.65); /* Outer panels on surface-page. Dark: the same glass highlight with a deeper drop. Light: none, flat like dc-shadow-card. */
  --dc-shadow-popover: 0 1px 0 rgba(255,255,255,.16) inset,0 24px 60px rgba(0,3,10,.72); /* Menus and popovers above any surface. */
  --dc-glow-accent: 0 0 0 1px rgba(31,199,174,.4),0 6px 22px rgba(31,199,174,.28); /* Primary actions, active rail items and live indicators: a Current Green ring and halo, dark theme only. */
  --dc-glow-soft: 0 0 18px rgba(31,199,174,.18); /* Soft Current Green halo on icon buttons, step markers, toggles and the voice bar. */
  --dc-focus-ring: 0 0 0 2px #4fb4ff; /* Keyboard focus ring on inputs, in blue, the one place besides surface edge light that blue appears (v81): blue-400 in dark, blue-700 in light, 3:1 or more on every surface. Focus is never Current Green, so it never reads as Running. */
}
[data-theme="light"] {
  --surface-page: var(--dc-surface-light);
  --surface-rail: var(--dc-surface-light);
  --surface-panel: var(--dc-panel-light);
  --surface-card: var(--dc-panel-light);
  --surface-feature: var(--dc-ocean);
  --surface-inset: var(--dc-inset-light);
  --surface-raised: var(--dc-surface-light);
  --surface-hover: var(--dc-inset-light);
  --surface-selected: var(--dc-blue-100);
  --surface-topbar: var(--dc-surface-light);
  --surface-footer: var(--dc-surface-light);
  --text-heading: var(--dc-navy-950);
  --text-body: var(--dc-navy-700);
  --text-muted: var(--dc-ink-muted-light);
  --text-subtle: var(--dc-ink-subtle-light);
  --text-disabled: var(--dc-text-500);
  --text-accent: var(--dc-current-700);
  --text-link: var(--dc-current-700);
  --text-link-hover: var(--dc-current-800);
  --border-subtle: var(--dc-border-subtle-light);
  --border-card: var(--dc-panel-light);
  --border-strong: var(--dc-border-functional-light);
  --border-accent: var(--dc-current-700);
  --action-primary-border: var(--dc-current-600);
  --action-secondary-border: var(--dc-border-functional-light);
  --action-secondary-fg: var(--dc-ocean);
  --action-secondary-bg-hover: var(--dc-inset-light);
  --action-ghost-fg: var(--dc-navy-400);
  --status-active: var(--dc-current-800);
  --status-active-bg: var(--dc-current-200);
  --status-active-border: var(--dc-current-300);
  --status-success: var(--dc-green-700);
  --status-success-bg: var(--dc-green-100);
  --status-success-border: var(--dc-green-300);
  --status-review: var(--dc-amber-700);
  --status-review-bg: var(--dc-amber-100);
  --status-review-border: var(--dc-amber-300);
  --status-blocked: var(--dc-red-700);
  --status-blocked-bg: var(--dc-red-100);
  --status-blocked-border: var(--dc-red-300);
  --status-neutral: var(--dc-navy-400);
  --status-neutral-bg: var(--dc-inset-light);
  --status-neutral-border: var(--dc-border-strong-light);
  --office-revenue: #78860f;
  --office-revenue-bg: #78860f1f;
  --office-revenue-border: #78860f73;
  --office-operations: #3b8f2a;
  --office-operations-bg: #3b8f2a1f;
  --office-operations-border: #3b8f2a73;
  --office-finance: #237a57;
  --office-finance-bg: #237a571f;
  --office-finance-border: #237a5773;
  --office-talent: #4a5fd8;
  --office-talent-bg: #4a5fd81f;
  --office-talent-border: #4a5fd873;
  --office-legal: #4b6f93;
  --office-legal-bg: #4b6f931f;
  --office-legal-border: #4b6f9373;
  --accent: var(--dc-current-700);
  --accent-fg: #ffffff;
  --brand-mark-top: var(--dc-ocean);
  --brand-mark-bottom: var(--dc-current-400);
  --text-accent-strong: var(--dc-current-800);
  --status-active-text: var(--dc-current-800);
  --status-success-text: var(--dc-green-700);
  --status-review-text: var(--dc-amber-700);
  --status-blocked-text: var(--dc-red-700);
  --status-active-solid: var(--dc-current-600);
  --status-success-solid: var(--dc-green-600);
  --status-review-solid: var(--dc-amber-600);
  --status-blocked-solid: var(--dc-red-600);
  --surface-track: var(--dc-border-subtle-light);
  --tutorial-spotlight: var(--dc-ocean);
  --tutorial-mask: rgba(11,37,69,.6);
  --tutorial-coach-surface: var(--surface-card);
  --tutorial-coach-step: var(--dc-ocean);
  --tutorial-win-surface: var(--surface-card);
  --tutorial-win-accent: var(--dc-ocean);
  --tutorial-win-accent-fg: #ffffff;
  --tutorial-win-accent-text: var(--dc-ocean);
  --dc-shadow-card: none;
  --dc-shadow-panel: none;
  --dc-shadow-popover: 0 12px 32px rgba(11,37,69,.16);
  --dc-glow-accent: none;
  --dc-glow-soft: none;
  --dc-focus-ring: 0 0 0 2px #1a5c94;
}
:root {
  --kelex-space-neg-4: -4px; /* Pulls a Bevel edge 4px over its neighbour. */
  --kelex-space-neg-1: -1px; /* Collapses a 1px border into the neighbouring edge. */
  --kelex-space-0: 0px; /* No space. */
  --kelex-space-1: 1px; /* Hairline offset next to a 1px border. */
  --kelex-space-4: 4px; /* Icon-to-label and badge gaps; replaces the old 2 to 5px steps. */
  --kelex-space-8: 8px; /* Default gap and tight padding; replaces 6 to 9px. */
  --kelex-space-12: 12px; /* Control and row padding, list gaps; replaces 10 to 13px. */
  --kelex-space-16: 16px; /* Card padding and grid gap; replaces 14 to 16px. */
  --kelex-space-20: 20px; /* Panel padding and large control padding; replaces 18 to 20px. */
  --kelex-space-24: 24px; /* Section gaps; replaces 22 to 24px. */
  --kelex-space-28: 28px; /* Kelex spacing step, 28px. */
  --kelex-space-32: 32px; /* Kelex spacing step, 32px. */
  --kelex-space-36: 36px; /* Kelex spacing step, 36px. */
  --kelex-space-40: 40px; /* Kelex spacing step, 40px. */
  --kelex-space-44: 44px; /* Kelex spacing step, 44px. */
  --kelex-space-48: 48px; /* Kelex spacing step, 48px. */
  --kelex-space-52: 52px; /* Kelex spacing step, 52px. */
  --kelex-space-56: 56px; /* Kelex spacing step, 56px. */
  --kelex-space-60: 60px; /* Kelex spacing step, 60px. */
  --kelex-space-64: 64px; /* Kelex spacing step, 64px. */
  --kelex-space-68: 68px; /* Kelex spacing step, 68px. */
  --kelex-space-72: 72px; /* Kelex spacing step, 72px. */
  --kelex-space-76: 76px; /* Kelex spacing step, 76px. */
  --kelex-space-80: 80px; /* Kelex spacing step, 80px. */
  --kelex-space-90: 90px; /* Kelex spacing step, 90px. */
  --dc-rail-width: 220px; /* Nav rail, expanded. A layout size on the Kelex 4px grid. */
  --dc-rail-width-collapsed: 64px; /* Nav rail, collapsed (kelex-space-64). */
  --dc-topbar-height: 64px; /* Top bar height (kelex-space-64). */
  --dc-footer-height: 44px; /* Governance footer height (kelex-space-44). */
  --dc-context-width: 400px; /* Right context panel width. A layout size on the Kelex 4px grid. */
  --dc-card-pad: 16px; /* Padding inside a card (kelex-space-16). */
  --dc-panel-pad: 20px; /* Padding inside a panel (kelex-space-20). */
  --dc-grid-gap: 16px; /* Gap between cards in a grid (kelex-space-16); was 14px. */
  --dc-radius-xs: 4px; /* Smallest corner; the option-row check mark. Kelex step 4. */
  --dc-radius-sm: 8px; /* Chips and badges (role: dc-radius-chip). Kelex step 8, shared with controls. */
  --dc-radius-md: 8px; /* Buttons, inputs and selects (role: dc-radius-control). Kelex step 8. */
  --dc-radius-lg: 12px; /* Nav items, tiles and rows (role: dc-radius-nav). Kelex step 12, shared with cards. */
  --dc-radius-xl: 12px; /* Cards (role: dc-radius-card). Kelex step 12. */
  --dc-radius-2xl: 16px; /* Outer panels (role: dc-radius-panel). Kelex step 16. */
  --dc-radius-pill: 999px; /* Dots, toggles and avatars only. Fully round, so not a step. */
  --phi: 1.618; /* The golden ratio. Two-column splits are phi : 1 (content : side, minmax(0, 1.618fr) minmax(0, 1fr)); the operational stage is phi : 1 wide; the ring radius is phi squared times the pyramid base. */
  --phi-inverse: 0.618; /* 1 / phi. The side column's share of a two-column split (38.2%), and the cosine of the stage camera's tilt: the ring's ellipse is phi : 1 because the camera looks down at the Kepler angle. */
  --phi-squared: 2.618; /* phi squared = phi + 1. The ring radius in pyramid bases (OfficeRing: radius = phi-squared x base), and the step from one Fibonacci measure to the one two rungs up. */
  --phi-root: 1.272; /* The square root of phi. A pyramid's height in half-bases (the Kepler triangle: half-base : height : slant = 1 : phi-root : phi), so every face rises at the Kepler angle. */
  --kepler-angle: 51.83deg; /* atan(phi-root): the Great Pyramid's face angle and the one stage camera (rotateX), which draws the ring as an ellipse of exactly phi : 1. Never another tilt. */
  --fib-13: 52px; /* Fibonacci ladder, 13 x 4. The smallest large measure: a compact label block, a small pyramid base in a preview. */
  --fib-21: 84px; /* Fibonacci ladder, 21 x 4. The default OfficePyramid base on a full stage; phi-squared x 84 = 220, so the ring radius lands on the next rung but one. */
  --fib-34: 136px; /* Fibonacci ladder, 34 x 4. A wide tile or a narrow column; the gap between two front offices' tags. */
  --fib-55: 220px; /* Fibonacci ladder, 55 x 4. The navigation rail, and the ring radius at the default base. */
  --fib-89: 356px; /* Fibonacci ladder, 89 x 4. The side column: a glass panel on the stage, a context or detail panel beside a list. */
  --fib-144: 576px; /* Fibonacci ladder, 144 x 4. The least width a content column keeps before the side column drops below it. */
  --fib-233: 932px; /* Fibonacci ladder, 233 x 4. The content column at a 1440 viewport (932 + 356 side column + the gaps), and the widest a reading column grows. */
  --kelex-text-label: 12.8px; /* Labels, meta lines, table text, buttons, chips and badges. Never body copy: body is locked at kelex-text-body. */
  --kelex-text-body: 16px; /* Body copy, locked at 16px, and card titles. Every paragraph and reading sentence is set here, never smaller. */
  --kelex-text-header-3: 20.8px; /* Small headers. Replaces 20px. */
  --kelex-text-header-2: 24px; /* Page titles. Replaces 24px. */
  --kelex-text-header-1: 32px; /* Hero lines. Replaces 28 to 32px. */
  --kelex-text-subtitle-3: 36px; /* Kelex subtitle, 36px. */
  --kelex-text-subtitle-2: 44px; /* Metric numerals. Replaces 40px. */
  --kelex-text-subtitle-1: 64px; /* Largest metric numerals. Replaces 56px. */
  --kelex-text-title-3: 86px; /* Kelex title, 86px. */
  --kelex-text-title-2: 96px; /* Kelex title, 96px. */
  --kelex-text-title-1: 130px; /* Kelex title, 130px. */
  --kelex-text-display-2: 172px; /* Kelex display, 172px. */
  --kelex-text-display-1: 258px; /* Kelex display, 258px. */
  --kelex-weight-regular: 400; /* Body copy and numerals. Replaces regular 400 and medium 500. */
  --kelex-weight-bold: 700; /* Titles, eyebrows, buttons and panel headers. Replaces semibold 600 and bold 700. Bold is 700: Kelex's tokens.js, Tailwind config and CLAUDE.md say 700; its tokens.css alone says 400, and this system does not follow that line. */
  --kelex-leading-default: 1.3; /* Default line height at every size. Replaces 1.2 to 1.5. */
  --kelex-leading-tight: 1; /* Single-line numerals and labels. Replaces 1 and 1.15. */
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* The owner's alternate only (Settings › Display, data-font="sans"). Nothing is designed in it; Mono is the default face. */
  --text-kelex-label: 400 12.8px/1.3 var(--font-mono); /* Kelex 'label' size, IBM Plex Mono Regular. */
  --text-kelex-body: 400 16px/1.3 var(--font-mono); /* Kelex 'body' size, IBM Plex Mono Regular. */
  --text-kelex-header-3: 400 20.8px/1.3 var(--font-mono); /* Kelex 'header-3' size, IBM Plex Mono Regular. */
  --text-kelex-header-2: 400 24px/1.3 var(--font-mono); /* Kelex 'header-2' size, IBM Plex Mono Regular. */
  --text-kelex-header-1: 400 32px/1.3 var(--font-mono); /* Kelex 'header-1' size, IBM Plex Mono Regular. */
  --text-kelex-subtitle-3: 400 36px/1.3 var(--font-mono); /* Kelex 'subtitle-3' size, IBM Plex Mono Regular. */
  --text-kelex-subtitle-2: 400 44px/1.3 var(--font-mono); /* Kelex 'subtitle-2' size, IBM Plex Mono Regular. */
  --text-kelex-subtitle-1: 400 64px/1.3 var(--font-mono); /* Kelex 'subtitle-1' size, IBM Plex Mono Regular. */
  --text-kelex-title-3: 400 86px/1.3 var(--font-mono); /* Kelex 'title-3' size, IBM Plex Mono Regular. */
  --text-kelex-title-2: 400 96px/1.3 var(--font-mono); /* Kelex 'title-2' size, IBM Plex Mono Regular. */
  --text-kelex-title-1: 400 130px/1.3 var(--font-mono); /* Kelex 'title-1' size, IBM Plex Mono Regular. */
  --text-kelex-display-2: 400 172px/1.3 var(--font-mono); /* Kelex 'display-2' size, IBM Plex Mono Regular. */
  --text-kelex-display-1: 400 258px/1.3 var(--font-mono); /* Kelex 'display-1' size, IBM Plex Mono Regular. */
  --text-dc-label: 400 12.8px/1.3 var(--font-mono); /* Labels, meta lines, table text, buttons, chips and badges: short fragments, never body copy. Kelex label size, IBM Plex Mono Regular. */
  --text-dc-body: 400 16px/1.3 var(--font-mono); /* Body copy, locked at 16px: every paragraph and reading sentence (summaries, consequences, descriptions, empty states, coach copy, panel text). Kelex body size, IBM Plex Mono Regular. */
  --text-dc-heading: 700 24px/1.3 var(--font-mono); /* Page titles and section headings. Kelex header-2 size, IBM Plex Mono Bold. */
  --text-dc-title: 700 32px/1.3 var(--font-mono); /* Hero lines and page headers. Kelex header-1 size, IBM Plex Mono Bold. */
}
.kelex-label {
  font-family: var(--font-mono);
  font-size: 12.8px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-header-3 {
  font-family: var(--font-mono);
  font-size: 20.8px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-header-2 {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-header-1 {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-subtitle-3 {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-subtitle-2 {
  font-family: var(--font-mono);
  font-size: 44px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-subtitle-1 {
  font-family: var(--font-mono);
  font-size: 64px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-title-3 {
  font-family: var(--font-mono);
  font-size: 86px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-title-2 {
  font-family: var(--font-mono);
  font-size: 96px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-title-1 {
  font-family: var(--font-mono);
  font-size: 130px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-display-2 {
  font-family: var(--font-mono);
  font-size: 172px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.kelex-display-1 {
  font-family: var(--font-mono);
  font-size: 258px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.dc-label {
  font-family: var(--font-mono);
  font-size: 12.8px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.dc-body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.dc-heading {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.dc-title {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}