/* Design tokens, mirroring the Figma "Product Branding" variables. Everything
   else references these, so a palette or scale change happens here only. */

:root {
  /* Color. Names match the Figma variables one to one: bg/status/info is
     --bg-status-info. Translucent values are fg/primary (#121212) at an opacity, so they
     tint whatever surface they sit on. */

  /* bg */
  --bg-surface: #fcfcfc;
  --bg-primary: #ffffff;
  --bg-secondary: #f2f2f2;
  --bg-sky: #eef8ff;
  --bg-meadow: #ecffe1;
  --bg-disabled: #dadada;

  /* bg/status */
  --bg-status-negative: #ffe4e4;
  --bg-status-positive: #f2ffe9;
  --bg-status-warning: #fff8e6;
  --bg-status-info: #e6f2ff;

  /* fg */
  --fg-primary: #121212;
  --fg-secondary: rgb(18 18 18 / 0.6);
  --fg-border: rgb(18 18 18 / 0.2);
  --fg-disabled: rgb(18 18 18 / 0.5);
  --fg-inverted: #ffffff;
  --fg-inverted-secondary: rgb(255 255 255 / 0.6);

  /* fg/status */
  --fg-status-negative: #9f3a34;
  --fg-status-positive: #486839;
  --fg-status-warning: #7e5f2e;
  --fg-status-info: #375a66;

  /* interactive. Hover and active are overlays: apply them as
     background-image: linear-gradient(var(--interactive-hover), var(--interactive-hover));
     so they darken any fill without a separate hover color per component. */
  --interactive-primary: #a2d9ff;
  --interactive-accent: #d4ffbc;
  --interactive-hover: rgb(18 18 18 / 0.05);
  --interactive-active: rgb(18 18 18 / 0.1);

  /* Donut neutrals. Free headroom reads as a pale wash, host-but-not-app as a
     deep blue, so neither competes with the pastel per-app slices. */
  --color-chart-unused: #d9ecfa;
  --color-chart-system: #3f6f9c;

  /* Type. Names match the Figma text styles: "body md / emphasized" is
     --text-body-md + --leading-body-md + --weight-emphasized. Interface text is
     Inter; IBM Plex Mono is only for code-like values (code, logs, terminal). */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 12px;

  /* Figma "auto" line height is the font's own (normal); body md is 130%. */
  --leading-body-lg: normal;
  --leading-body-md: 1.3;
  --leading-body-sm: normal;

  --weight-regular: 400;
  --weight-emphasized: 500;

  /* Uppercase labels (section labels, table headers) keep a little tracking. */
  --tracking-label: 0.72px;

  /* Layout, not type: the banner and back link sit in a fixed-height band. */
  --leading-loose: 36px;

  /* Space */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Shape */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --border-w: 1px;
  --shadow-card: 2px 2px 0 rgba(0, 0, 0, 0.1);

  /* Layout */
  /* One content width for every page. Terminal and logs opt out entirely via
     .layout--full: they are viewers, and want the whole window. */
  --layout-width: 800px;
  --layout-width-narrow: 420px;
  --layout-gutter: 16px;
  --grass-height: 24px;
  --cloud-band-height: clamp(230px, 56vh, 520px);
}

@media (max-width: 640px) {
  :root {
    --cloud-band-height: clamp(140px, 30vh, 220px);
    --layout-gutter: 12px;
    --grass-height: 16px;
  }
}