/* 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, node 136:41.
 * Extracted spec lives in design/buttons/buttons.md.
 *
 * Nothing in the Figma file is bound to a Figma variable, so these semantic
 * names are ours. When the palette changes, this file is the only place that
 * needs editing — components reference the semantic names, never raw hex.
 *
 * Values marked NOT IN FIGMA are code-side decisions; see design/buttons/buttons.md
 * for why each exists and what still needs a design answer.
 */

:root {
  /* ---- Typography ------------------------------------------------------ */
  --ds-font-family: 'Inter', system-ui, sans-serif;
  --ds-label-size: 14px;
  --ds-label-weight: 500;
  --ds-label-line-height: 1.2;

  /* ---- 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: 12px;

  /* ---- 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;

  /* ---- 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;

  /* =====================================================================
   * 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;
  --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);

  /* ---- Page header tabs -------------------------------------------------- */
  --shell-tab-gap: 24px;
  --shell-tab-size: 14px;
  --shell-tab-weight: 600;
  --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;
  --surface-row-border: #ececec;

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

  /* ---- Pipeline stages --------------------------------------------------- */
  /* One fill per stage, read off the pills in Figma nodes 192:1588 (Prospectare),
   * 192:1619, 192:1651, 192:1682, 187:1155 (Castigat) and 192:1801 (Pierdut).
   * The ramp runs magenta → cyan across the open stages, then green/grey once
   * the deal is closed. Label is always white. */
  --stage-prospecting: #bc2dff;
  --stage-qualifying: #882dff;
  --stage-proposal: #2d54ff;
  --stage-negotiation: #2dceff;
  --stage-won: #1eb060;
  --stage-lost: #a5a5ae;
  --stage-fg: #ffffff;

  /* ---- 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%);

  /* =====================================================================
   * Dark marketing surface — Figma "home" node 258:393, band 258:411.
   *
   * 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.
   * ===================================================================== */

  --surface-dark: #04030c;           /* node 258:394, the band's fill */
  --surface-dark-deep: #03020b;      /* node 258:413, outer stop of the vignette */
  --surface-dark-fg: #fafafb;        /* node 258:438, first headline line */
  --surface-dark-fg-muted: #acacca;  /* node 258:438 second line, and chip labels */

  /* Chips floating over the eclipse (nodes 258:414 … 258:436). Figma draws six
   * fills, all violet at different depths — read here as distance from the
   * glow rather than as six unrelated colours. */
  --surface-dark-chip-near: #4f2ca9;
  --surface-dark-chip-mid: #4a2c92;
  --surface-dark-chip-far: #27145c;
  --surface-dark-chip-fg: #acacca;
  --surface-dark-chip-radius: 16px;

  /* 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;
}