.internal/defense-factory-ui/src/theme.css

/* Plugin-owned presentation over the shared DS contract. Keep application-window
   styling out of the iframe; the bridge only supplies its light/dark mode. */
@font-face {
  font-family: "OpenAI Sans";
  src: url("@defense-factory/fonts/OpenAISans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OpenAI Sans";
  src: url("@defense-factory/fonts/OpenAISans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "OpenAI Sans";
  src: url("@defense-factory/fonts/OpenAISans-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@theme {
  --font-sans: "OpenAI Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", menlo, consolas,
    "Liberation Mono", monospace;
  --text-xs: 11px;
  --text-xs--line-height: calc(1 / 0.75);
  --text-xs--font-weight: initial;
  --text-xs--letter-spacing: initial;
  --text-sm: 12px;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-sm--font-weight: initial;
  --text-sm--letter-spacing: initial;
  --text-base: 14px;
  --text-base--line-height: 1.5;
  --text-base--font-weight: initial;
  --text-base--letter-spacing: initial;
  --text-lg: 16px;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-lg--font-weight: initial;
  --text-lg--letter-spacing: initial;
  --text-xl: 28px;
  --text-xl--line-height: 1.4;
  --text-xl--font-weight: initial;
  --text-xl--letter-spacing: initial;
  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 8%);
  --shadow-lg: 0 4px 8px -2px rgb(0 0 0 / 10%);
  --shadow-xl: 0 8px 16px -4px rgb(0 0 0 / 12%);
  --shadow-2xl: 0 16px 32px -8px rgb(0 0 0 / 19%);
}

@layer theme {
  :where(:root),
  :where([data-theme]) {
    --color-text: light-dark(#1a1c1f, #dfdfdf);
    --color-text-emphasis: var(--color-text);
    --color-text-prose: var(--color-text);
    --alpha-base: var(--color-text);
    --color-text-secondary: color-mix(
      in srgb,
      var(--color-text) 65%,
      transparent
    );
    --color-text-tertiary: light-dark(
      rgb(26 28 31 / 50%),
      rgb(255 255 255 / 50%)
    );
    --color-text-disabled: var(--color-text-tertiary);
    --color-text-inverse: light-dark(#ffffff, #0d0d0d);
    --color-text-secondary-solid: light-dark(
      rgb(26 28 31 / 70%),
      rgb(255 255 255 / 70%)
    );
    --color-text-info: light-dark(var(--blue-300), var(--blue-100));
    --color-text-info-soft: var(--blue-300);
    --color-text-danger: light-dark(var(--red-500), var(--red-300));
    --color-text-warning: light-dark(var(--orange-500), var(--orange-300));
    --color-text-success: light-dark(var(--green-500), var(--green-300));
    --color-text-caution: light-dark(var(--yellow-400), var(--yellow-300));
    --color-chart-purple: light-dark(var(--purple-400), var(--purple-300));

    --color-surface: light-dark(#ffffff, #181818);
    --color-surface-secondary: light-dark(#f9f9f9, #000000);
    --color-surface-tertiary: light-dark(rgb(237 237 237 / 40%), #212121);
    /* Portaled menus must obscure the content underneath in either theme. */
    --color-surface-elevated: light-dark(#ffffff, #282828);
    --color-surface-elevated-secondary: var(--color-surface);
    --color-background-primary-solid: var(--color-text);
    --color-text-primary-solid: var(--color-surface);
    --color-background-primary-soft: color-mix(
      in srgb,
      var(--color-text) 5%,
      transparent
    );
    --color-background-primary-soft-alpha: light-dark(
      rgb(26 28 31 / 2%),
      rgb(255 255 255 / 3%)
    );
    --color-background-secondary-soft: light-dark(
      rgb(26 28 31 / 5%),
      rgb(255 255 255 / 5%)
    );
    --color-background-primary-soft-active: var(
      --color-background-secondary-soft
    );
    --color-background-primary-soft-hover: light-dark(
      rgb(26 28 31 / 5%),
      rgb(255 255 255 / 8%)
    );
    --color-background-primary-ghost-hover: var(
      --color-background-primary-soft-hover
    );
    --color-background-secondary-soft-hover: var(
      --color-background-primary-soft-hover
    );
    --color-background-secondary-soft-active: var(
      --color-background-primary-soft-active
    );
    --color-background-secondary-soft-alpha: var(
      --color-background-primary-soft-hover
    );
    --color-background-secondary-solid: var(--color-background-secondary-soft);
    --color-background-secondary-solid-hover: var(
      --color-background-primary-soft-hover
    );
    --color-background-secondary-solid-active: var(
      --color-background-primary-soft-active
    );
    --color-background-secondary-ghost-hover: var(
      --color-background-primary-ghost-hover
    );
    --color-background-secondary-ghost-active: var(
      --color-background-primary-ghost-active
    );
    --color-background-info-soft: color-mix(
      in srgb,
      var(--color-text-info) 30%,
      transparent
    );
    --color-border: light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8%));
    --color-border-subtle: light-dark(
      rgb(26 28 31 / 5%),
      rgb(255 255 255 / 4%)
    );
    --color-border-strong: light-dark(
      rgb(26 28 31 / 12%),
      rgb(255 255 255 / 16%)
    );
    --color-border-primary-outline: var(--color-border-strong);
    --color-border-secondary-outline: var(--color-border-strong);
    --color-ring: light-dark(
      var(--blue-300),
      color-mix(in srgb, var(--blue-300) 70%, transparent)
    );
    --control-font-size-sm: var(--text-xs);
    --control-font-size-md: var(--text-sm);
    --control-font-size-lg: var(--text-base);
  }
}

/* Retain the slightly softened corners of the current UI where supported. */
@supports (corner-shape: superellipse(1.5)) {
  :root {
    --radius-md: 10px;
    --radius-lg: 12.5px;
    --radius-xl: 15px;
    --radius-2xl: 20px;
    --radius-3xl: 25px;
    --radius-4xl: 30px;
  }

  :is(
      .rounded-md,
      .rounded-lg,
      .rounded-xl,
      .rounded-2xl,
      .rounded-3xl,
      .rounded-4xl
    ) {
    corner-shape: superellipse(1.5);
  }
}

body {
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  padding: 0;
}

::selection {
  background: var(--color-background-info-soft);
  color: var(--color-text);
}

code,
pre {
  font-family: var(--font-mono);
}

@layer components {
  .heading-lg {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: inherit;
  }
}