/* =====================================================================
   Adakode light theme — the host for the static panel demo.
   Lime #76E600 · Near Black #111111 · Soft White #F7F8F5

   Inside VS Code the editor hands the panel its colours through --vscode-*
   variables, and the panel ships dark fallbacks for the case where nothing
   supplies them (webview.css). A browser page is that case, which is why the
   demo panel rendered as a black terminal. This file plays the part the editor
   plays: it supplies the Adakode light palette for those variables, and
   panel.html marks <body class="vscode-light"> so the panel's own light rules
   switch on with it (the activity dots, the chat box outline, the Light+ code
   tokens). webview.js reads no colour, so the demo's light theme is all here.

   It mirrors AgentBuilder/adakode-client/public/brand.css, the palette the
   shipping browser client uses, with one difference that the window decides:
   the client paints its page Soft White with white cards, while this panel is
   the surface area of a light workbench, so the surface and the cards are both
   white here.

   Nothing in the extension changes. webview.css, webview.js and hljs.js stay
   the extension's own bytes; in VS Code this file is never loaded, so the real
   panel keeps inheriting whatever theme the user runs.
   ===================================================================== */

:root {
  color-scheme: light;

  /* brand */
  --ak-lime: #76E600;            /* Electric Lime: small marks only */
  --ak-lime-dark: #5FBF00;       /* lime, one step down: hover and focus */
  --ak-lime-deep: #2F7D00;       /* lime deep enough to read as text on light */
  --ak-ink: #111111;             /* Near Black */
  --ak-white: #FFFFFF;           /* the panel's surface and its cards */
  --ak-muted: #6B6F76;
  --ak-line: rgba(17, 17, 17, 0.10);
  --ak-line-strong: rgba(17, 17, 17, 0.16);
  --ak-tint: rgba(17, 17, 17, 0.045);
  --ak-lime-soft: rgba(95, 191, 0, 0.14);
  --ak-drop: 0 6px 24px rgba(17, 17, 17, 0.10);

  /* the shared panel's own variables */
  --fg: var(--ak-ink);
  --muted: var(--ak-muted);
  --bg: var(--ak-white);
  --panel: var(--ak-white);
  --code-bg: var(--ak-tint);
  --border: var(--ak-line);
  --input-bg: var(--ak-white);
  --input-border: var(--ak-line-strong);
  /* --focus drives the send button and every focus ring, an element seen on every
     keystroke: near-black keeps it calm, where a saturated accent would shout. */
  --focus: var(--ak-ink);
  --link: var(--ak-lime-deep);
  /* Primary actions keep the brand lime with near-black text, the way the site's
     buttons do. Their footprint is small (dialog actions), never an always-on surface. */
  --button-bg: var(--ak-lime);
  --button-fg: var(--ak-ink);
  --button2-bg: #ECEEE7;
  --button2-fg: var(--ak-ink);
  --green: #2E7D32;
  --red: #C62828;
  --amber: #B26A00;
  --violet: var(--ak-lime-deep);
  --line: var(--ak-line);
  --mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;

  /* every --vscode-* name the panel reads, so no dark fallback can leak through */
  --vscode-foreground: var(--ak-ink);
  --vscode-descriptionForeground: var(--ak-muted);
  --vscode-sideBar-background: var(--ak-white);
  --vscode-editor-background: var(--ak-white);
  --vscode-editorWidget-background: var(--ak-white);
  --vscode-widget-border: var(--ak-line);
  --vscode-panel-border: var(--ak-line);
  --vscode-textCodeBlock-background: var(--ak-tint);
  --vscode-input-background: var(--ak-white);
  --vscode-input-foreground: var(--ak-ink);
  --vscode-input-border: var(--ak-line-strong);
  --vscode-input-placeholderForeground: #9AA09B;
  --vscode-focusBorder: var(--ak-ink);
  --vscode-textLink-foreground: var(--ak-lime-deep);
  --vscode-button-background: var(--ak-lime);
  --vscode-button-foreground: var(--ak-ink);
  --vscode-button-secondaryBackground: #ECEEE7;
  --vscode-button-secondaryForeground: var(--ak-ink);
  --vscode-testing-iconPassed: #2E7D32;
  --vscode-testing-iconFailed: #C62828;
  --vscode-editorWarning-foreground: #B26A00;
  --vscode-list-hoverBackground: var(--ak-tint);
  --vscode-list-inactiveSelectionBackground: var(--ak-lime-soft);
  --vscode-dropdown-background: var(--ak-white);
  --vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  --vscode-editor-font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --vscode-font-size: 13px;
}

/* The send button takes its fill from --focus (near-black) but its label colour
   from --button-fg, which pairs with the lime primary: near-black on near-black.
   It needs the light glyph its dark fill asks for. */
.send { color: var(--ak-white); }

/* The user's own turn repeats on every message, so it is a quiet neutral block
   rather than a wash of colour, and a dialog is a solid card rather than the
   tint the panel uses for code. */
.user { background: var(--ak-tint); border-color: var(--ak-line); }
.dialog { background: var(--ak-white); }
.overlay { background: rgba(17, 17, 17, 0.35); }

/* The mode select's chevron is drawn in the renderer as a light-grey SVG, which
   disappears on a light surface. The same chevron in the muted grey the panel
   uses for secondary text. */
select#mode {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6F76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5 8 10.5 12 6.5'/></svg>");
}

/* The chat history dropdown carries a 0.35 black shadow tuned for a dark panel;
   on white it reads as a smudge. A softer drop keeps it lifted. */
.history-panel { box-shadow: var(--ak-drop); }