/* ----------------------------------------------------------------------------
   @opengeni/react design tokens

   Pure CSS variables — no Tailwind required to consume them. Dark is the
   first-class default (`:root`); light is an explicit opt-in via
   `[data-og-theme="light"]` (or the `.og-light` class) on any ancestor, so
   themes can be nested and rebranded per subtree.

   The palette is deliberately calm: pure neutral greys (no hue tint), a
   neutral grey "accent" for icons, links, focus and selected marks, and color
   only where it carries meaning - the primary button's teal wash, the soft
   teal/peach glow behind the rail and sign-in page, and the status hues.
   Information density comes from typography and spacing, not from color
   shouting. Neutral and brand values are exact studio hex values; status and
   danger values are tuned for WCAG AA as 11-12 px text on every surface.
   -------------------------------------------------------------------------- */

:root {
  /* Typography ------------------------------------------------------------- */
  --og-font-sans: "Inter Variable", "Inter", "Noto Sans JP Variable", "Noto Sans Arabic Variable", ui-sans-serif, system-ui, sans-serif;
  --og-font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Noto Sans JP Variable", "Noto Sans Arabic Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --og-font-features: "cv11", "ss01", "ss03";
  /* Runtime type tokens. Defaults are the exact values used by apps/web, so
     adopting the public token surface is render-compatible with the product.
     Hosts can override these on any SDK ancestor; portalled surfaces copy the
     effective --og-* values from their trigger. */
  --og-font-size-xs: 11px;
  --og-line-height-xs: 1.45;
  --og-font-size-sm: 12px;
  --og-line-height-sm: 1.5;
  --og-font-size-base: 13px;
  --og-line-height-base: 1.55;
  --og-font-size-md: 15px;
  --og-line-height-md: 1.6;
  --og-font-size-control: 12px;
  --og-line-height-control: 16px;
  --og-font-size-menu: 14px;
  --og-line-height-menu: 20px;
  --og-font-size-composer: 16px;
  --og-line-height-composer: 24px;
  --og-font-size-composer-wide: 15px;
  --og-line-height-composer-wide: 24px;
  --og-code-font-size: 12px;
  --og-code-line-height: 18px;

  /* Model-policy picker density. These defaults preserve today's apps/web
     geometry. They are tokens (rather than host-only class overrides) so an
     embedded composer and its portalled menu can be tuned as one surface. */
  --og-model-picker-trigger-height: 2rem;
  --og-model-picker-trigger-height-mobile: 1.75rem;
  --og-model-picker-menu-width: 22rem;
  --og-model-picker-menu-padding: 0.375rem;
  --og-model-picker-row-padding-x: 0.625rem;
  --og-model-picker-row-padding-y: 0.375rem;
  --og-model-picker-effort-height: 2rem;
  --og-realtime-menu-width: 18rem;

  /* Radius ----------------------------------------------------------------- */
  --og-radius-xs: 4px;
  --og-radius-sm: 6px;
  --og-radius-md: 10px;
  --og-radius-lg: 14px;
  --og-radius-xl: 20px;
  --og-radius-full: 9999px;

  /* Motion — communicates state; never decorates ---------------------------- */
  /* TEMP: set to 1 before landing — slows vertical CSS motion for eyeballing. */
  --og-motion-inspect-scale: 1;
  --og-duration-fast: calc(120ms * var(--og-motion-inspect-scale));
  --og-duration-base: calc(180ms * var(--og-motion-inspect-scale));
  --og-duration-slow: calc(320ms * var(--og-motion-inspect-scale));
  /* Timeline disclose: MANUAL expand/collapse stays chrome-fast; AUTOMATIC
     settle-fold is ~5–7× slower so the reader can register a change they
     did not ask for. Stream tip ink is an age window (same ms as fade). */
  --og-duration-disclose: calc(120ms * var(--og-motion-inspect-scale));
  --og-duration-disclose-settle: calc(820ms * var(--og-motion-inspect-scale));
  --og-duration-stream: calc(420ms * var(--og-motion-inspect-scale));
  /* Softened/partial markdown → final GFM (View Transition + settle breath). */
  --og-duration-markdown-crystallize: calc(480ms * var(--og-motion-inspect-scale));
  --og-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --og-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --og-ease-stream: cubic-bezier(0.16, 1, 0.3, 1);
  --og-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* Neutrals (dark, "graphite") -------------------------------------------
     The rail and page chrome (`bg`) sit lighter than the main content pane
     (`canvas`); surfaces step up from the rail. */
  --og-color-bg: #303030;
  --og-color-canvas: #202020;
  --og-color-surface-1: #333333;
  --og-color-surface-2: #383838;
  --og-color-surface-3: #404040;
  --og-color-selection: #484848;
  /* Hover: one treatment for every navigation item, list row and menu row
     (menu highlight and keyboard focus included). A translucent fg wash, so
     it darkens or lightens whatever sits under it - the rail glow, the
     canvas, a card or a menu panel - by the same visible step. Selected and
     active rows use the stronger, opaque `selection`. */
  --og-color-hover: rgb(230 230 230 / 0.08);
  --og-color-border: #454545;
  --og-color-border-strong: #555555;
  --og-color-fg: #e6e6e6;
  /* Labels you act on: rail and settings navigation, session titles, menu
     rows. A hair under fg so the active item (fg) still stands out, never
     muted like meta text. */
  --og-color-fg-label: #d4d4d4;
  /* A step over the studio's #b0b0b0 so muted text (secondary buttons, list
     meta) keeps 4.5:1 on the selected-row fill too. */
  --og-color-fg-muted: #b8b8b8;
  /* Lifted from the studio's #949494 so quiet meta keeps 4.5:1 on the rail,
     Surface 1-2 and the canvas. */
  --og-color-fg-subtle: #a3a3a3;

  /* Accent - a neutral grey for icons, links, focus rings, the active tab bar
     and selected rings. Color lives in the primary wash and the glow. */
  --og-color-accent: #c4c4c4;
  --og-color-accent-strong: #dcdcdc;
  --og-color-accent-deep: #d5d5d5;
  --og-color-accent-fg: #242424;
  /* Legacy color-mix fallbacks stay in the base rule; supported values are
     grouped below so processors do not repeat this selector for every token. */
  --og-color-accent-soft: var(--og-color-accent);

  /* Primary action - the "teal wash" button: a quiet tinted fill, ink text,
     a 1px tinted edge and no shadow. Hover mixes 15% ink into the fill. */
  --og-color-primary: #2b3432;
  --og-color-primary-fg: #eeeeee;
  --og-color-primary-border: #4e5e59;
  --og-color-primary-hover: var(--og-color-primary);
  /* Switch off state. On, a switch takes the primary fill and edge with a
     primary-ink thumb, so the thumb brightens when it turns on. */
  --og-color-switch-track: #454545;
  --og-color-switch-thumb: #a3a3a3;

  /* Glow - the soft teal (top-left) and peach (bottom-right) wash behind the
     rail and the sign-in page. Quiet variants for dense surfaces. */
  --og-glow-teal: #79d9c125;
  --og-glow-peach: #ffb78724;
  --og-glow-teal-quiet: #79d9c115;
  --og-glow-peach-quiet: #ffb78714;

  /* Status - muted so they inform without alarming --------------------------- */
  --og-color-status-queued: #a3a3a3;
  --og-color-status-running: #d5bd72;
  --og-color-status-idle: #83cbb0;
  --og-color-status-waiting: #e9ab77;
  --og-color-status-failed: oklch(0.77 0.12 22);
  --og-color-status-cancelled: #a3a3a3;
  /* Readable as 14 px menu text on Surface 3. Filled destructive controls use
     the darker danger fill with the danger foreground. */
  --og-color-danger: oklch(0.76 0.13 22);
  --og-color-danger-fill: oklch(0.52 0.16 22);
  --og-color-danger-fg: #ffffff;
  --og-color-diff-add-bg: var(--og-color-status-idle);
  --og-color-diff-del-bg: var(--og-color-status-failed);

  /* Elevation ----------------------------------------------------------------
     Dark surfaces barely cast shadows; elevation reads mostly from the
     surface ramp. Shadows stay soft and tight. The glow is for the one thing
     that should feel alive (focused composer, running session). */
  --og-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.28);
  --og-shadow-md: 0 2px 8px oklch(0 0 0 / 0.32), 0 1px 2px oklch(0 0 0 / 0.24);
  --og-shadow-lg: 0 8px 28px oklch(0 0 0 / 0.42), 0 2px 8px oklch(0 0 0 / 0.28);
  /* One soft, neutral halo only. The composer's focus affordance already
     draws a crisp edge via `focus-within:border-og-accent/50`; the old
     `0 0 0 1px` ring sat flush against that border and read as a doubled
     hairline, so the glow is purely a faint diffuse grey halo. */
  --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 10%, transparent);

  /* Session chrome — override on `.og-session-chrome` (or an ancestor) to rebrand.
     Defaults stay quiet: soft surface, short motion, no gold shout. */
  --og-session-chrome-surface: var(--og-color-surface-2);
  --og-session-chrome-surface-open: var(--og-color-surface-2);
  --og-session-chrome-border: var(--og-color-border);
  --og-session-chrome-border-open: var(--og-color-border);
  /* Selected chip: solid lift vs open dock surface (not a faint wash). */
  --og-session-chrome-highlight: var(--og-color-surface-3);
  --og-session-chrome-highlight-ring: var(--og-color-fg);
  --og-session-chrome-shadow: 0 6px 22px -14px oklch(0 0 0 / 0.42);
  --og-session-chrome-shadow-open: 0 10px 28px -16px oklch(0 0 0 / 0.5);
  --og-session-chrome-radius: var(--og-radius-lg);
  --og-session-chrome-chip-min-height: 1.75rem;
  --og-session-chrome-chip-pad-x: 0.5rem;
  --og-session-chrome-chip-gap: 0.125rem;
  --og-session-chrome-rail-pad: 0.15rem;
  --og-session-chrome-panel-pad-x: 0.45rem;
  --og-session-chrome-panel-pad-y: 0.3rem;
  /* Expanded agents/queue/inbox/goal body — scroll inside, never grow unbound. */
  --og-session-chrome-panel-max-height: min(18rem, 40dvh);
  --og-session-chrome-duration: 220ms;
  --og-session-chrome-crossfade-duration: 180ms;
  --og-session-chrome-ease: var(--og-ease-out);
  --og-session-chrome-row-hover: var(--og-color-surface-3);

  color-scheme: dark;
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 16%, transparent);
    --og-color-hover: color-mix(in srgb, var(--og-color-fg) 8%, transparent);
    --og-color-primary-hover: color-mix(in srgb, var(--og-color-primary) 85%, var(--og-color-primary-fg));
    --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 14%, transparent);
    --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 14%, transparent);
    --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 10%, transparent);
    --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 82%, transparent);
    --og-session-chrome-surface-open: color-mix(in oklch, var(--og-color-surface-2) 92%, transparent);
    --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 85%, transparent);
    --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 16%, transparent);
    --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 55%, transparent);
  }
}

/* One supported dense preset for embedded product panels. It changes only
   typography and model-picker density; colors, radii, and brand tokens remain
   independently customizable. Apply either form to an SDK ancestor. */
[data-og-density="compact"],
.og-density-compact {
  --og-font-size-xs: 10px;
  --og-line-height-xs: 1.5;
  --og-font-size-sm: 11px;
  --og-line-height-sm: 1.5;
  --og-font-size-base: 12px;
  --og-line-height-base: 1.55;
  --og-font-size-md: 13px;
  --og-line-height-md: 1.6;
  --og-font-size-control: 11px;
  --og-line-height-control: 16px;
  --og-font-size-menu: 12px;
  --og-line-height-menu: 18px;
  --og-font-size-composer: 13px;
  --og-line-height-composer: 20px;
  --og-font-size-composer-wide: 13px;
  --og-line-height-composer-wide: 20px;
  --og-model-picker-trigger-height: 1.75rem;
  --og-model-picker-trigger-height-mobile: 1.75rem;
  --og-model-picker-menu-width: 20rem;
  --og-model-picker-menu-padding: 0.25rem;
  --og-model-picker-row-padding-x: 0.5rem;
  --og-model-picker-row-padding-y: 0.375rem;
  --og-model-picker-effort-height: 1.75rem;
  --og-realtime-menu-width: 15rem;
}

/* Light theme — explicit opt-in, themable per subtree ----------------------- */
[data-og-theme="light"],
.og-light {
  --og-color-bg: #f6f6f6;
  --og-color-canvas: #ffffff;
  --og-color-surface-1: #ffffff;
  --og-color-surface-2: #eeeeee;
  --og-color-surface-3: #e5e5e5;
  --og-color-selection: #e2e2e2;
  --og-color-hover: rgb(36 36 36 / 0.06);
  --og-color-border: #dedede;
  --og-color-border-strong: #bdbdbd;
  --og-color-fg: #242424;
  --og-color-fg-label: #3a3a3a;
  /* Muted and subtle are a step darker than the studio's #686868 / #767676
     so both keep 4.5:1 as small text on the rail, Surface 2 (row hover) and
     the selected-row fill, with a visible step between them. */
  --og-color-fg-muted: #5f5f5f;
  --og-color-fg-subtle: #696969;

  --og-color-accent: #545454;
  --og-color-accent-strong: #383838;
  --og-color-accent-deep: #383838;
  --og-color-accent-fg: #ffffff;
  /* Match the dark-token fallback strategy without duplicating support rules. */
  --og-color-accent-soft: var(--og-color-accent);

  --og-color-primary: #ebf2f0;
  --og-color-primary-fg: #292929;
  --og-color-primary-border: #c4d5d0;
  --og-color-primary-hover: var(--og-color-primary);
  --og-color-switch-track: #bdbdbd;
  --og-color-switch-thumb: #ffffff;

  --og-glow-teal: #9fe3d359;
  --og-glow-peach: #ffb78752;
  --og-glow-teal-quiet: #9fe3d32b;
  --og-glow-peach-quiet: #ffb78729;

  /* Status letters are ordinary 11-12 px text, including over row hover and
     selected rows, and on the pale diff tints. The studio hues (#a3652f,
     #8b782c, #287d64) are darkened just enough for 4.5:1 on Surface 2 and
     on the selected-row fill. */
  --og-color-status-queued: #696969;
  --og-color-status-running: #716122;
  --og-color-status-idle: #237058;
  --og-color-status-waiting: #8c5524;
  --og-color-status-failed: oklch(0.5 0.19 22);
  --og-color-status-cancelled: #696969;
  /* Ordinary 14 px destructive menu text also appears on Surface 3. Keep
     enough AA contrast headroom there, including browser color rounding. */
  --og-color-danger: oklch(0.52 0.2 22);
  --og-color-danger-fill: oklch(0.5 0.19 22);
  --og-color-danger-fg: #ffffff;
  --og-color-diff-add-bg: var(--og-color-status-idle);
  --og-color-diff-del-bg: var(--og-color-status-failed);

  --og-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.07);
  --og-shadow-md: 0 2px 8px oklch(0 0 0 / 0.09), 0 1px 2px oklch(0 0 0 / 0.06);
  --og-shadow-lg: 0 8px 28px oklch(0 0 0 / 0.13), 0 2px 8px oklch(0 0 0 / 0.07);
  --og-shadow-glow: 0 0 20px var(--og-color-accent);

  --og-session-chrome-surface: var(--og-color-surface-2);
  --og-session-chrome-surface-open: var(--og-color-surface-2);
  --og-session-chrome-border: var(--og-color-border);
  --og-session-chrome-border-open: var(--og-color-border);
  --og-session-chrome-highlight: var(--og-color-surface-3);
  --og-session-chrome-highlight-ring: var(--og-color-fg);
  --og-session-chrome-shadow: 0 4px 16px -10px oklch(0 0 0 / 0.14);
  --og-session-chrome-shadow-open: 0 8px 22px -12px oklch(0 0 0 / 0.18);
  --og-session-chrome-row-hover: var(--og-color-surface-3);

  color-scheme: light;
}

@supports (color: color-mix(in lab, red, red)) {
  [data-og-theme="light"],
  .og-light {
    --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 11%, transparent);
    --og-color-hover: color-mix(in srgb, var(--og-color-fg) 6%, transparent);
    --og-color-primary-hover: color-mix(in srgb, var(--og-color-primary) 85%, var(--og-color-primary-fg));
    --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 12%, transparent);
    --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 12%, transparent);
    --og-shadow-glow: 0 0 20px color-mix(in oklch, var(--og-color-accent) 12%, transparent);
    --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 88%, transparent);
    --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 90%, transparent);
    --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 12%, transparent);
    --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 70%, transparent);
  }
}