/* Design system tokens.
 *
 * Shared by app/ and landing-page/ — this file is the single source of truth
 * for both, which is why it sits at the repo root rather than inside either.
 * See ./README.md.
 *
 * Source of truth: Figma "Spparco" file 1VOuppOLAw675Zcm55UHaA.
 *
 * Two naming systems live here, and the difference matters when you add to
 * the file:
 *
 *   - Typography is stated by Figma as two variable collections, primitive
 *     and semantic (nodes 449:374 and 449:372). Those names are Figma's, not
 *     ours, and must not be renamed to taste. Spec: design/typography/typography.md.
 *   - Everything else was read off screens where no variable is bound, so
 *     the --ds-* / --shell-* / --surface-* names below are ours. Spec:
 *     design/buttons/buttons.md and design/shell/shell.md.
 *
 * Either way this file is the only place a value is written down — components
 * reference the semantic names, never raw hex and never a --type-* primitive.
 *
 * Values marked NOT IN FIGMA are code-side decisions; see the spec files for
 * why each exists and what still needs a design answer.
 */

:root {
  /* =====================================================================
   * Typography — Figma nodes 465:2 (foundation), 449:374 (primitive
   * collection), 449:372 (semantic collection) and 449:373 (text styles).
   * Extracted spec: design/typography/typography.md.
   *
   * This is the first part of the system Figma states as *variables* rather
   * than as raw values on a screen, and it arrives as two collections. The
   * two layers below mirror them exactly, and the rule between them is the
   * usual one: primitives are values, semantics are the only names a
   * component may reference. Nothing outside this file should use a
   * --type-* primitive.
   *
   * Foundation (node 465:2): typeface Geist, base 1rem = 16px, scale 1.25
   * (major third). md is the base; lg and up are the scale rounded to whole
   * pixels; sm and xs step down by a fixed 2px because a ratio is too coarse
   * at the small end.
   * ===================================================================== */

  /* ---- Primitive: font size ------------------------------------------- */
  /* Named by the number Figma gives them, not by their role. */
  --type-size-970: 3.75rem;    /* 60px — 48 x 1.25, rounded */
  --type-size-900: 3rem;       /* 48px — 40 x 1.25, rounded */
  --type-size-800: 2.5rem;     /* 40px — 32 x 1.25, rounded */
  --type-size-700: 2rem;       /* 32px — 24 x 1.25, rounded */
  --type-size-600: 1.5rem;     /* 24px — 20 x 1.25, rounded */
  --type-size-550: 1.25rem;    /* 20px — 16 x 1.25 */
  --type-size-500: 1rem;       /* 16px — the base */
  --type-size-480: 0.875rem;   /* 14px — fixed step, base - 2 */
  --type-size-470: 0.75rem;    /* 12px — fixed step, 14 - 2 */

  /* ---- Primitive: font weight ----------------------------------------- */
  /* Six weights are declared; the semantic layer below only spends three.
   * The other three are stated by the collection and kept so a later style
   * has them to reach for. Geist is loaded across the whole range. */
  --type-weight-light: 300;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semi-bold: 600;
  --type-weight-bold: 700;
  --type-weight-extra-bold: 800;

  /* ---- Primitive: line height ------------------------------------------ */
  /* Figma writes these as 120 / 140 / 160 — percentages of the font size —
   * and they stay percentages here, expressed in `em`. CSS also allows a
   * unitless multiplier, and for any element that sets its own font-size the
   * two are identical: 1.4em and 1.4 both resolve to 1.4 x that font-size.
   *
   * They differ only under inheritance. A unitless value passes the *ratio*
   * down, so a child recomputes it against its own size; an em value resolves
   * to a length where it is declared and passes that *length* down. Figma's
   * model is the em one — a text style is a fixed relationship between a size
   * and its leading, not a ratio that follows a child around — so em is what
   * the design says and em is what this is.
   *
   * The consequence is real and worth knowing: nothing may set a line height
   * for text it does not also set the size of. After the 2026-08-27 redraw
   * every rule that sets leading sets font-size in the same rule, which is
   * why the switch moved nothing on screen. Keep it that way. */
  --type-leading-120: 1.2em;
  --type-leading-140: 1.4em;
  --type-leading-160: 1.6em;

  /* ---- Primitive: letter spacing ---------------------------------------- */
  /* Figma calls this "line spacing" and writes -2 / 0 / 2 — again
   * percentages of the font size, so em rather than px: they have to scale
   * with the type, or Display and Body would not track alike. */
  --type-tracking-minus-2: -0.02em;
  --type-tracking-0: 0em;
  --type-tracking-plus-2: 0.02em;

  /* ---- Semantic: family ------------------------------------------------- */
  /* The foundation names one typeface: Geist. It is the face for the whole
   * system now, not only the display face it was when only the marketing
   * page had asked for it. --ds-font-family below is the exception that
   * remains, and is documented there. */
  --font-family-default: 'Geist', system-ui, sans-serif;

  /* ---- Semantic: size --------------------------------------------------- */
  --font-size-5xl: var(--type-size-970);
  --font-size-4xl: var(--type-size-900);
  --font-size-3xl: var(--type-size-800);
  --font-size-2xl: var(--type-size-700);
  --font-size-xl: var(--type-size-600);
  --font-size-lg: var(--type-size-550);
  --font-size-md: var(--type-size-500);
  --font-size-sm: var(--type-size-480);
  --font-size-xs: var(--type-size-470);

  /* ---- Semantic: weight -------------------------------------------------- */
  --font-weight-default: var(--type-weight-regular);
  --font-weight-emphasis: var(--type-weight-semi-bold);
  --font-weight-strong: var(--type-weight-extra-bold);

  /* ---- Semantic: line height ---------------------------------------------- */
  --line-height-tight: var(--type-leading-120);
  --line-height-default: var(--type-leading-140);
  --line-height-relaxed: var(--type-leading-160);

  /* ---- Semantic: letter spacing -------------------------------------------- */
  --letter-spacing-tight: var(--type-tracking-minus-2);
  --letter-spacing-default: var(--type-tracking-0);
  --letter-spacing-relaxed: var(--type-tracking-plus-2);

  /* ---- Control label (pre-dating the type scale) -------------------------- */
  /* Inter, and a 500 label. Both disagree with the collections above: the
   * foundation names one typeface, and Label / Medium is sm + emphasis (600).
   * The button component set (nodes 136:41, 436:292) has not been redrawn
   * against the new scale, so the drawn button still wins for the button.
   * Kept separate rather than folded in, so the disagreement stays visible.
   * See CLAUDE.md gaps 17 and 18. */
  --ds-font-family: 'Inter', system-ui, sans-serif;
  --ds-label-size: var(--font-size-sm);
  --ds-label-weight: var(--type-weight-medium);
  --ds-label-line-height: var(--line-height-tight);

  /* Was the display face when Geist was the marketing-only exception; now an
   * alias of the one family, kept so existing rules keep resolving. */
  --ds-font-display: var(--font-family-default);

  /* ---- Control geometry ------------------------------------------------ */
  --ds-control-height: 36px;
  --ds-control-radius: 12px;
  --ds-control-padding: 16px;        /* label side */
  --ds-control-padding-icon: 12px;   /* icon side — tighter, per Figma */
  --ds-control-gap: 6px;
  --ds-icon-size: 12px;

  /* NOT IN FIGMA — compact size for existing app chrome (map controls,
   * topbar, sidebar) that would break layout at 36px. Needs a Figma spec. */
  --ds-control-height-sm: 28px;
  --ds-control-radius-sm: 8px;
  --ds-control-padding-sm: 12px;
  --ds-control-padding-icon-sm: 8px;
  --ds-label-size-sm: var(--font-size-xs);

  /* ---- Action: primary ------------------------------------------------- */
  --ds-primary-bg: #1e1e21;
  --ds-primary-bg-hover: #3c3c3f;
  --ds-primary-bg-pressed: #000000;
  --ds-primary-fg: #ffffff;

  /* ---- Action: secondary ----------------------------------------------- */
  --ds-secondary-fg: #0c0c0d;
  --ds-secondary-border: #d0d1d6;
  --ds-secondary-border-hover: #7b7b83;
  --ds-secondary-border-pressed: #000000;
  --ds-secondary-bg-pressed: #f3f4f8;

  /* ---- Action: tertiary ------------------------------------------------ */
  --ds-tertiary-fg: #0c0c0d;
  --ds-tertiary-bg-hover: #f3f4f8;
  --ds-tertiary-bg-pressed: #eeeff3;

  /* ---- Brand ----------------------------------------------------------- */
  /* The one brand colour, stated outright by the 2026-08-24 logo refinement
   * (design/logo/logo.md): #5500ff. It settles the two-blues question the
   * earlier import couldn't — #0059ff below is not it. */
  --brand-accent: #5500ff;
  /* What the mark becomes when it sits on the accent plate — the pack's
   * `-reversed` files are white artwork on #5500ff. */
  --brand-accent-fg: #ffffff;

  /* ---- Action: accent -------------------------------------------------- */
  /* The Export button in the page header (node 192:1772) is a solid #0059ff.
   * This is NOT --brand-accent and the two now visibly disagree; the button
   * predates the refinement and no screen has been redrawn against it yet.
   * The rest is a code-side decision: Figma draws the resting state only. */
  --ds-accent-bg: #0059ff;
  --ds-accent-fg: #ffffff;
  /* NOT IN FIGMA — hover/pressed for the accent variant. */
  --ds-accent-bg-hover: #0049d1;
  --ds-accent-bg-pressed: #003aa6;

  /* ---- Action: inverse ------------------------------------------------- */
  /* The button as it appears on the dark plate (node 436:291): a white fill
   * with black label, the photographic negative of the primary variant. This
   * is the first dark-surface button in the system and it partly closes gap 4
   * in CLAUDE.md — Figma now draws the resting state, where before it drew
   * nothing. Hover and pressed are still ours. */
  --ds-inverse-bg: #ffffff;
  --ds-inverse-fg: #000000;
  /* NOT IN FIGMA — hover/pressed for the inverse variant. A white fill can
   * only travel one way, so both steps walk down the grey ramp. */
  --ds-inverse-bg-hover: #e4e4e8;
  --ds-inverse-bg-pressed: #cfcfd6;

  /* ---- Disabled -------------------------------------------------------- */
  --ds-disabled-bg: #ebecf1;
  --ds-disabled-fg: #98989e;

  /* ---- Focus ----------------------------------------------------------- */
  /* NOT IN FIGMA — no focus state exists in the component set. Required for
   * keyboard accessibility, so these are invented. */
  --ds-focus-ring: #1e1e21;
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;

  /* ---- Motion ---------------------------------------------------------- */
  /* NOT IN FIGMA — matches the 0.15s already used throughout index.css. */
  --ds-transition: 0.15s ease;

  /* ---- Dialog ---------------------------------------------------------- */
  /* NOT IN FIGMA — the file draws no modal, drawer or popover of any kind, and
   * asking for a deal's value at the moment it is created needs somewhere to
   * ask. Every value here is derived from something Figma does state: the panel
   * wears the large card radius and the card border, the scrim is the near-black
   * ink at 40%, and the field borrows the control height and radius the buttons
   * already use. Only the width and the scrim opacity are free choices. */
  --ds-dialog-width: 420px;
  /* NOT IN FIGMA — the deal editor is two columns of fields, documents and a
   * stage history, and none of that fits the ask-one-number width above. */
  --ds-dialog-width-lg: 880px;
  --ds-dialog-radius: var(--surface-card-radius-lg);
  --ds-dialog-padding: 24px;
  --ds-dialog-gap: 20px;
  --ds-dialog-bg: var(--surface-card);
  --ds-dialog-border: var(--surface-card-border);
  --ds-dialog-scrim: rgb(12 12 13 / 40%);

  /* Fields inside it. Scoped to the dialog for now — when a second consumer
   * appears these become a Field component of their own. */
  --ds-field-height: var(--ds-control-height);
  --ds-field-radius: var(--ds-control-radius);
  --ds-field-padding: 12px;
  --ds-field-border: var(--control-border);
  --ds-field-border-focus: var(--brand-accent);
  --ds-field-bg: #ffffff;
  --ds-field-fg: #0c0c0d;
  --ds-field-label-fg: #6c6c6c;
  --ds-field-invalid: var(--delta-down);

  /* =====================================================================
   * App shell — Figma nodes 170:1465 (sidebar) and 192:1464 (page header).
   * Extracted spec: design/shell/shell.md.
   * ===================================================================== */

  /* ---- Shell surfaces --------------------------------------------------- */
  --shell-bg: #f6f6f6;          /* sidebar surface */
  --shell-surface: #ffffff;     /* raised card on the sidebar (user card) */
  --shell-border: #ececec;      /* sidebar right edge, header bottom edge */
  --shell-radius: 12px;

  /* ---- Shell geometry --------------------------------------------------- */
  --shell-sidebar-width: 280px;
  --shell-padding: 24px;
  --shell-gap: 8px;
  --shell-header-height: 60px;
  --shell-header-padding-y: 12px;
  --shell-nav-icon-size: 24px;

  /* ---- Shell text ------------------------------------------------------- */
  --shell-fg: #0c0c0d;          /* active nav item, user name, active tab */
  --shell-fg-muted: #6c6c6c;    /* resting nav item, user role line */
  --shell-fg-subtle: #a5a5ae;   /* inactive tab */

  /* ---- Nav item --------------------------------------------------------- */
  --shell-nav-bg-active: #eeeeee;
  /* NOT IN FIGMA — the design draws resting and selected only. Hover is a
   * step short of the selected fill so the two stay distinguishable. */
  --shell-nav-bg-hover: #f0f0f0;
  /* NOT IN FIGMA — no disabled nav treatment exists; four of the six items
   * have no route yet. Borrows the button set's disabled foreground. */
  --shell-nav-fg-disabled: var(--ds-disabled-fg);

  /* ---- Count / unread badge --------------------------------------------- */
  --shell-badge-bg: #e6504c;
  --shell-badge-fg: #ffffff;
  --shell-badge-size: 12px;
  /* OFF SCALE — the type scale stops at 12px, which is this badge's entire
     diameter. A count badge is one of the few places type has to be smaller
     than the system's smallest step; see design/typography/typography.md. */
  --shell-badge-font-size: 8px;
  /* The badge is ringed in the surface it sits on, so it reads as a cutout. */
  --shell-badge-ring: var(--shell-bg);

  /* ---- Brand ------------------------------------------------------------ */
  --shell-logo-fg: var(--brand-accent);
  /* Collapsed, the rail draws the symbol in black (node 370:1086) — the violet
   * belongs to the expanded masthead's lockup, not to the rail's mark. */
  --shell-logo-fg-rail: #000000;

  /* ---- Page header tabs -------------------------------------------------- */
  --shell-tab-gap: 24px;
  /* The tab is Label / Medium — sm, emphasis. Read as `Geist SemiBold 14 / 1.2`
     off node 192:1464, which is the same thing said in the older vocabulary. */
  --shell-tab-size: var(--font-size-sm);
  --shell-tab-weight: var(--font-weight-emphasis);
  --shell-tab-indicator: #0c0c0d;

  /* ---- Content card ------------------------------------------------------ */
  /* The white panel each pipeline section sits in (Figma node 192:1576). */
  --surface-card: #ffffff;
  --surface-card-border: #ececec;
  --surface-card-radius: 16px;
  /* The Sumar cards (node 626:163653) are 20px where the pipeline section card
   * is 16. Both are drawn, so both get a name rather than one rounding to the
   * other. Distinct from --companies-card-radius, which is also 20 but earns it
   * for a different reason — those cards float over the map. */
  --surface-card-radius-lg: 20px;
  --surface-row-border: #ececec;

  /* The inset strip a card's headline figure sits in — "Total 19.0M € +12.4%
   * vs FY 2026" (node 626:163656). Same grey as the sidebar surface. */
  --surface-inset: #f6f6f6;
  --surface-inset-radius: 12px;

  /* Resting border of the Filtrează / Grupează / Ordonează controls. */
  --control-border: #d0d1d6;

  /* ---- Pipeline stages --------------------------------------------------- */
  /* One fill per stage, read off the Activitate donut legend on Figma node
   * 626:163651 (the "pipeline / sumar" screen).
   *
   * This replaces the magenta → cyan rainbow the pills carried from nodes
   * 192:1588 / 192:1619 / 192:1651 / 192:1682. The ramp is now a single hue —
   * four tints of --brand-accent running light → dark in process order, closing
   * on the brand violet itself once the deal is won. The tints sit at roughly
   * 45 / 54 / 67 / 86 percent of #5500ff on white, but they are stated flat in
   * Figma rather than computed, so these are the drawn values.
   *
   * Câștigat leaves green behind: the funnel's last column and the conversion
   * chart's won bars are both the brand violet. Green still lives on the
   * company growth arrows (--trend-up) and the Închise badges, neither of which
   * this screen redraws — see CLAUDE.md.
   *
   * NOT SETTLED — the pill sets --stage-fg on these at 12px, and the first
   * three fall short of 4.5:1 (2.67, 3.26 and 4.42 against white). Kept as
   * drawn on instruction; recorded in design/pipeline/pipeline.md. Figma's own
   * funnel does the same thing at 24px and reaches only 2.73:1. */
  --stage-prospecting: #b38af5;
  --stage-qualifying: #a673f9;
  --stage-proposal: #914ffe;
  --stage-negotiation: #7419ff;
  --stage-won: var(--brand-accent);
  /* Pierdut keeps the pill grey from node 192:1801. The Sumar charts draw a
   * lost deal in a much lighter grey, but that is a bar with no label on it —
   * see --chart-lost. #e4e4e4 could not carry --stage-fg. */
  --stage-lost: #a5a5ae;
  --stage-fg: #ffffff;

  /* ---- Sumar charts ------------------------------------------------------
   * Figma node 626:163651. The funnel is not a fill per column: it is one
   * gradient laid across the whole 765px card, with a ghost of the same violet
   * behind it, and each column clipping its own slice.
   *
   * Drawn as #AD8BEE → #5601FE. Both stops are snapped here — the dark one to
   * --brand-accent, which the same screen uses in ~18 other places, and the
   * light one to --stage-prospecting, which the donut legend states for that
   * stage. The file carries no colour variables at all, so both disagreements
   * read as eyedropping rather than intent. */
  --funnel-from: var(--stage-prospecting);
  --funnel-to: var(--brand-accent);
  --funnel-ghost-opacity: 0.1;

  /* Conversion bars: won takes --brand-accent, lost this grey (node 626:163830).
   * Axis and tick labels sit lighter than the body muted tone (626:163825). */
  --chart-lost: #e4e4e4;
  --chart-axis-fg: #9e9e9e;
  --chart-grid: #ececec;

  /* ---- Deltas ------------------------------------------------------------
   * A rise reads violet on this screen, not green — every positive figure on
   * node 626:163651 is #5500ff. A fall keeps the red the pipeline already uses,
   * and a flat zero greys out entirely (node 626:163871). */
  --delta-up: var(--brand-accent);
  --delta-down: #e6504c;
  --delta-flat: #d9d9d9;

  /* ---- Growth arrow ------------------------------------------------------ */
  --trend-up: #3ec082;
  --trend-down: #e6504c;

  /* A counter at zero is greyed out rather than hidden (Figma node 192:1594). */
  --count-zero-fg: #d0d1d6;

  /* ---- Section count badges ---------------------------------------------- */
  /* Neutral (Figma 192:1844), won and lost (192:1835 / 192:1838). */
  --badge-neutral-bg: var(--shell-nav-bg-active);
  --badge-neutral-fg: #6b6b6f;
  --badge-won-bg: #def5ea;
  --badge-won-fg: var(--trend-up);
  --badge-lost-bg: #f7e7e6;
  --badge-lost-fg: var(--trend-down);

  /* Border of the 32px company mark in a pipeline row (Figma node 192:1583). */
  --surface-mark-border: #c9c9c9;

  /* NOT IN FIGMA — the design has no popover of any kind, and the row action
   * menu needs to lift off the rows beneath it. */
  --overlay-shadow: 0 8px 24px rgb(12 12 13 / 12%);

  /* ---- Companies screen -------------------------------------------------
   * Figma nodes 370:1074 (list over the map) and 481:2214 (filters).
   * Extracted spec: design/companies/companies.md.
   *
   * Cards here float over a map rather than sitting on a page, and they are
   * rounder than the rest of the app: 20px on the search row and the filter
   * button, against the shell's 12 and the content card's 16. */
  --companies-card-radius: 20px;

  /* The switch in the filter panel (nodes 481:2214 on, 481:3321 off). Figma
   * draws both states, which is more than the button set offers — only the
   * focus ring is ours. */
  --ds-toggle-width: 46px;
  --ds-toggle-height: 26px;
  --ds-toggle-padding: 3px;
  --ds-toggle-knob: 20px;
  --ds-toggle-knob-fill: #ffffff;
  --ds-toggle-bg: #e9e9e9;
  --ds-toggle-bg-on: var(--brand-accent);

  --companies-row-name: #000000;      /* node 481:1934 — black, not --shell-fg */
  --companies-placeholder: #a0a0a0;   /* node 476:1095, "Cauta" */
  --companies-chevron: #949494;       /* node 481:1945, the row's trailing chevron */

  /* ---- Map — Figma nodes 473:608 / 473:622 / 473:688 / 473:712 ----------
   * The map runs its own palette, and it is not the app's. The pin marks are
   * brighter than --trend-up / --trend-down because they sit on a white pin on
   * a colour-washed map rather than on a white row. Read off the exported
   * assets, not eyedropped. */
  --map-pin-bg: #ffffff;
  --map-pin-shadow: 0 0 25px rgb(0 0 0 / 10%);   /* Figma blur 12.61, 10% black */
  --map-pin-growing: #0fd44a;                     /* node 473:611 */
  --map-pin-declining: #e5233d;                   /* node 473:625 */
  --map-pin-recommended: var(--brand-accent);     /* node 473:688 */

  /* The count chip a grouped pin becomes (node 473:712). */
  --map-cluster-bg: #000000;
  --map-cluster-fg: #ffffff;
  --map-cluster-radius: 12px;

  /* The radius disc (node 370:1081): a radial wash from 20% to 5% of the brand
   * violet, ringed in a light tint of it. */
  --map-radius-fill-inner: rgb(85 0 255 / 20%);
  --map-radius-fill-outer: rgb(85 0 255 / 5%);
  --map-radius-ring: #c8acff;

  /* The user's own position (nodes 370:1082, 370:1083) — a violet core in a
   * white ring, not the blue dot this used to be. */
  --map-user-ring: #ffffff;
  --map-user-core: var(--brand-accent);

  /* The design's own down-trend is #e5233d, a shade off the --trend-down the
   * pipeline already uses (#e6504c). Not reconciled here: one screen is not
   * enough to move a colour the whole app shares. Recorded in the spec. */

  /* =====================================================================
   * Dark marketing surface — Figma "coming soon" node 436:201.
   *
   * The app is light throughout; this is the first dark treatment in the
   * system, and it closes open gap 4 in CLAUDE.md ("no dark-surface
   * treatment"). Used by landing-page/, not yet by the app.
   *
   * Re-read 2026-08-25 against node 436:201, which supersedes the 258:*
   * import the way the logo pack superseded the earlier brand marks. The
   * plate lifted a shade, the muted headline tone cooled, the body copy got
   * its own lighter tone, and the three-step chip ramp resolved into six
   * distinct fills. Old values are gone rather than kept alongside.
   * ===================================================================== */

  --surface-dark: #07060c;           /* node 436:201, the page fill */
  --surface-dark-deep: #03020b;      /* node 436:379, outer stop of the vignette */
  --surface-dark-fg: #fafafb;        /* node 436:215, first headline line */
  --surface-dark-fg-muted: #9d97a9;  /* node 436:215, second headline line */
  --surface-dark-fg-body: #cec7dd;   /* node 436:216, the lede */

  /* Chips floating over the orbit (nodes 436:398 … 436:419). Six violet fills
   * at six depths — a ramp read from the glow outwards, darkest first, not six
   * unrelated colours. Figma assigns them per label; the page keeps that
   * assignment rather than re-deriving it from position. */
  --surface-dark-chip-1: #27145c;    /* node 436:416, Predicții */
  --surface-dark-chip-2: #2c1761;    /* node 436:398, Companii */
  --surface-dark-chip-3: #4e3088;    /* node 436:414, Oportunități */
  --surface-dark-chip-4: #4a2c92;    /* node 436:410, Conversații */
  --surface-dark-chip-5: #4f2ca9;    /* node 436:418, Activități */
  --surface-dark-chip-6: #5d39a3;    /* node 436:412, Decidenți */
  --surface-dark-chip-fg: #acacca;   /* all six labels */
  --surface-dark-chip-radius: 18px;  /* node 436:398, 18.108px */

  /* Unlabelled dots scattered through the same field (nodes 436:400 … 436:409).
   * A second, wider ramp than the chips — it reaches further into the plate at
   * the dark end, because a dot has no text to stay legible against. */
  --surface-dark-dot-1: #0d062b;     /* node 436:402 */
  --surface-dark-dot-2: #1f0e49;     /* node 436:407 */
  --surface-dark-dot-3: #28145c;     /* node 436:400 */
  --surface-dark-dot-4: #4a289a;     /* node 436:403 */
  --surface-dark-dot-5: #513099;     /* node 436:408 */
  --surface-dark-dot-6: #552eb4;     /* nodes 436:405, 436:406, 436:409 */
  --surface-dark-dot-7: #603f88;     /* nodes 436:401, 436:404 */

  /* The avatar bubbles orbiting the glow (nodes 436:380 … 436:396). The fill is
   * a pink wash over a heavy backdrop blur — the blur is what makes it read as
   * glass rather than as a pink ring, so the two belong together. */
  --surface-dark-node-bg: rgb(217 136 241 / 20%);   /* node 436:380 */
  --surface-dark-node-border: #29145f;              /* node 436:380 */
  --surface-dark-node-border-width: 2.263px;
  --surface-dark-node-blur: 113.174px;

  /* NOT IN FIGMA — the marketing page needs a focus ring that survives on the
   * dark plate; --ds-focus-ring is near-black and disappears there. */
  --surface-dark-focus-ring: #ffffff;
}