/* alt-shift brand for Raketa, from the Figma direction of 3 Nov 2026
   (docs/product/2026-10-27-prototype-sharing-tool/design-direction-2026-11-03.md).
   A sparse override in the ui-kit theme format, loaded right after tokens.css.
   ui-kit has no lime or warm-grey scale, so those primitives live here until a
   second tool needs them. Colours go in the light and dark blocks: the base dark
   block outranks a bare :root. */

:root {
  --raketa-warm-50: #faf9f8;
  --raketa-warm-100: #f4f2ef;
  --raketa-warm-200: #ebe7e2;
  --raketa-warm-300: #ded8d0;

  --raketa-lime-50: #fbffe0;
  --raketa-lime-100: #f6ffb3;
  --raketa-lime-200: #f5ff94;
  --raketa-lime-300: #f1ff6e;
  --raketa-lime-400: #ebff3c;
  --raketa-lime-500: #dcf024;
  --raketa-lime-600: #cbe01a;
  --raketa-lime-900: #3a3f0a;
  --raketa-lime-950: #23260a;

  --radius-control: var(--radius-8);
  --radius-panel: var(--radius-12);

  /* The sidebar sits on the screen colour; the page beside it is a surface. */
  --sidebar-inset-surface: var(--color-ui-surface);

  /* Lime is a fill, never text: on white it is unreadable. */
  --button-link-content: var(--color-ui-content);
  --select-item-content-selected: var(--color-ui-content);

  /* Comment pins and the placing crosshair are blue in the design, and must
     show on any prototype, so they do not follow the primary colour. */
  --raketa-pin-content: var(--white);
}

:root:not([data-theme="dark"]) {
  --color-config-screen: var(--raketa-warm-50);
  --color-config-primary: var(--raketa-lime-400);

  --color-ui-container: var(--white);
  --color-ui-line: var(--raketa-warm-200);

  --color-interactive-primary-content: var(--gray-950);
  /* The kit draws thin lines in this colour (dropzone, checked items, checkbox,
     radio, toast spinner), and a lime line vanishes on white. Only the lime
     button keeps a lime edge. */
  --color-interactive-primary-line: var(--gray-950);
  --button-primary-line: var(--raketa-lime-600);
  --color-interactive-primary-hover: var(--raketa-lime-500);
  --color-interactive-primary-pressed: var(--raketa-lime-600);
  --color-interactive-primary-separator: var(--raketa-lime-600);
  --color-interactive-primary-active: var(--raketa-lime-50);
  /* A lime ring on white fails contrast. */
  --color-interactive-primary-focus: var(--gray-950);
  --color-interactive-primary-disabled: var(--raketa-lime-100);
  --color-interactive-primary-ondisabled: var(--gray-400);

  --color-interactive-secondary-surface: var(--raketa-warm-100);
  --color-interactive-secondary-line: var(--raketa-warm-200);
  --color-interactive-secondary-hover: var(--raketa-warm-200);
  --color-interactive-secondary-pressed: var(--raketa-warm-200);
  --color-interactive-secondary-disabled: var(--raketa-warm-100);

  --color-interactive-neutral-line-hover: var(--raketa-warm-300);
  --color-interactive-neutral-hover: var(--raketa-warm-100);
  --color-interactive-neutral-pressed: var(--raketa-warm-200);
  --color-interactive-neutral-active: var(--raketa-warm-100);
  --color-interactive-neutral-disabled: var(--raketa-warm-100);

  --raketa-pin-surface: var(--blue-600);
}

:root[data-theme="dark"] {
  --color-config-primary: var(--raketa-lime-400);

  --color-ui-container: var(--gray-900);
  /* The kit's elevated grey equals its dark line, so floating parts lost
     their borders. */
  --color-ui-elevated: var(--gray-900);

  /* The design's hover fill is a step quieter than the kit's dark one. The
     pressed and "on" fill is a step above the design's gray-800, which read at
     1.2:1 on the top bar. */
  --color-interactive-neutral-hover: var(--gray-850);
  --color-interactive-neutral-pressed: var(--gray-750);

  /* Lines one step up from the design: gray-800 read at 1.2:1 on panels. */
  --color-ui-line: var(--gray-750);
  --color-interactive-neutral-line: var(--gray-750);
  --color-interactive-neutral-line-hover: var(--gray-600);

  --color-interactive-primary-content: var(--gray-950);
  --color-interactive-primary-line: var(--raketa-lime-400);
  --color-interactive-primary-hover: var(--raketa-lime-300);
  --color-interactive-primary-pressed: var(--raketa-lime-200);
  --color-interactive-primary-separator: var(--raketa-lime-600);
  --color-interactive-primary-active: var(--raketa-lime-950);
  --color-interactive-primary-disabled: var(--raketa-lime-900);
  --color-interactive-primary-ondisabled: var(--gray-500);
  /* A neutral ring, as in light mode, not the brand lime. gray-500 is the
     quietest step that keeps 3:1 on dark panels (3.7:1 on gray-900). */
  --color-interactive-primary-focus: var(--gray-500);

  --raketa-pin-surface: var(--blue-500);
}