* exact structure consumed by `OpenAgentsWeb.UI`. */

@import "../vendor/basecoat/base/base.css";

@import "../vendor/basecoat/components/button.css";

@import "../vendor/basecoat/components/button-group.css";

@import "../vendor/basecoat/components/input.css";

@import "../vendor/basecoat/components/textarea.css";

@import "../vendor/basecoat/components/label.css";

 * (--ink-surface), elevated components another step up (--ink-raised). New

 * surfaces take a rung; they do not invent a fourth.

 *

 * The palette is dark-only, as OpenAgents is (`color-scheme: dark`). A light

 * palette requires a separate owner-approved design project.

 * Two themes. `:root` carries dark; `:root[data-theme="light"]` overrides only

 * the primitives and the few literal exceptions. Everything else in the ladder

 * is `color-mix(... var(--text-ink) N% ...)`, so the icon tiers, washes, hover

 * surface and inverse control invert on their own when the ink flips — that is

 * the whole point of deriving them rather than listing them twice.

 *

 * Values are Linear's, taken from a saved copy of their docs: neutral to

 * faintly cool, never blue. The previous palette was tinted (chroma ~.03-.07

 * around hue 263) which read as blue on every surface.

 */

:root {

  color-scheme: dark;

  /* PRIMITIVES — the Aiur palette, verbatim. */

  --ink-void: oklch(12.901% 0.01498 266.378); /* darkest: page, sidebar */

  --ink-surface: oklch(18.311% 0.03089 263.383); /* +1: canvas, chrome */

  --ink-raised: oklch(24.185% 0.04699 263.85); /* +2: elevated components */

  --text-ink: oklch(96.386% 0.01695 267.792); /* the one text/icon/wash ink */

  --accent: oklch(62.308% 0.18801 259.815);

  --accent-bright: oklch(71.374% 0.14338 254.624);

  --info: oklch(75.351% 0.13899 232.661);

  --success: oklch(72.275% 0.19201 149.579);

  --warning: oklch(76.859% 0.16466 70.08);

  --danger: oklch(71.063% 0.16615 22.216);

  /* DERIVATIONS — text tiers as alpha steps of the ink. The literals are the

     Aiur values; the percentages beside them are the measured best-fit alpha

     steps, recorded so a later theme can choose the ladder deliberately. */

  /* PRIMITIVES — Linear's dark ramp, verbatim.

     void #08090a is their --color-bg-primary, surface #0f1011 their level-1

     panel, raised #141516 their level-2. Raised is LIGHTER than void; light

     mode keeps that direction rather than flipping it. */

  --ink-void: #08090a; /* darkest: page, sidebar */

  --ink-surface: #0f1011; /* +1: canvas, chrome */

  --ink-raised: #141516; /* +2: elevated components */

  --text-ink: #f7f8f8; /* the one text/icon/wash ink (their --color-fg-primary) */

  /* The single accent. Linear's brand indigo, used only for the primary action

     and links; every other surface is neutral.

     NAME COLLISION, deliberate: Basecoat's base.css also defines --accent, but

     as shadcn does — a subtle hover background paired with --accent-foreground,

     not a brand color. Ours is defined later at equal specificity so it wins.

     Only combobox.css, dropdown-menu.css and select.css consume Basecoat's

     meaning and none of the three is imported; importing one would give it an

     indigo hover surface. Rename ours before importing them. */

  --accent: #5e6ad2;

  --accent-bright: #828fff;

  --info: #4ea7fc;

  --success: #27a644;

  --warning: #d4b144;

  --danger: #eb5757;

  /* DERIVATIONS — text tiers. Literals are Linear's fg ramp; the percentages

     beside them are the equivalent alpha step, kept so the ladder stays legible

     if a later theme wants to derive rather than list. */

  --text-primary: color-mix(in oklab, var(--text-ink) 100%, transparent); /* 100% */

  --text-body: oklch(90.551% 0.0307 265.325); /* exception; best fit 91% */

  --text-muted: oklch(71.613% 0.04926 262.439); /* exception; best fit 65% */

  --text-dim: oklch(65.775% 0.04389 274.477); /* exception; best fit 57% */

  --text-body: #d0d6e0; /* their fg-secondary */

  --text-muted: #8a8f98; /* their fg-tertiary */

  --text-dim: #62666d; /* their fg-quaternary */

  /* Icon tiers. Glyphs read lighter than text at the same alpha, so they get

     their own ladder rather than borrowing the text one. */

  --ink-hover: color-mix(in oklab, var(--text-ink) 4%, var(--ink-raised)); /* 4% over raised */

  /* The one inverted control: the strongest ink as ground, the darkest rung as

     glyph. State changes ride opacity so the fill never shifts hue. */

     glyph. Flips by itself in light mode — dark fill, light glyph. */

  --control-inverse-bg: var(--text-primary);

  --control-inverse-fg: var(--ink-void);

  /* Borders. --line and --line-strong are the 12% and 20% rungs by role but

     keep their literals (same chroma accounting as the text exceptions); the

     soft and faint rungs are true ladder steps. */

  --line: oklch(29.154% 0.0506 264.607); /* exception; best fit 11% */

  /* Borders. Linear's border ramp. */

  --line: #23252a; /* their --color-border-primary */

  --line-soft: color-mix(in oklab, var(--text-ink) 8%, transparent); /* 8% */

  --line-faint: color-mix(in oklab, var(--text-ink) 4%, transparent); /* 4% */

  --line-strong: oklch(36.455% 0.0696 264.888); /* exception; best fit 20% */

  --line-strong: #34343a; /* their --color-border-secondary */

}

/* LIGHT.

 *

 * Linear publishes no light palette (their site is dark-only), so this is

 * derived in the same language rather than copied: the same neutral hue

 * discipline, the same surface-ladder direction (raised is lighter than void),

 * and the same ink flipped to their darkest value.

 *

 * Only the primitives and the four literal exceptions are restated. The icon

 * tiers, washes, hover surface and inverse control are all derived from

 * --text-ink above and invert without being repeated here.

 */

:root[data-theme="light"] {

  color-scheme: light;

  --ink-void: #f7f8f8; /* page, sidebar — the most recessive surface */

  --ink-surface: #fbfbfc; /* +1: canvas */

  --ink-raised: #ffffff; /* +2: elevated components read as paper */

  --text-ink: #08090a; /* the ink is now their darkest value */

  /* Indigo darkens for contrast against white; the bright rung becomes the

     hover/visited state rather than the resting one. */

  --accent: #5e6ad2;

  --accent-bright: #4a55b8;

  --text-body: #3c4149;

  --text-muted: #62666d;

  --text-dim: #8a8f98;

  --line: #e6e7e9;

  --line-strong: #d0d2d6;

}

/* No-JS / no-stored-preference fallback. The head script sets data-theme

 * before first paint, so this only governs the window before it runs and the

 * case where scripting is off. It is scoped :not([data-theme]) so an explicit

 * choice always wins over the OS preference. */

@media (prefers-color-scheme: light) {

  :root:not([data-theme]) {

    color-scheme: light;

    --ink-void: #f7f8f8;

    --ink-surface: #fbfbfc;

    --ink-raised: #ffffff;

    --text-ink: #08090a;

    --accent: #5e6ad2;

    --accent-bright: #4a55b8;

    --text-body: #3c4149;

    --text-muted: #62666d;

    --text-dim: #8a8f98;

    --line: #e6e7e9;

    --line-strong: #d0d2d6;

  }

}

/* The semantic four are OpenAgents, not DaisyUI's, and have no Basecoat

 * equivalent — `--color-destructive` covers danger, but there is no success,

 * warning, or info in the Basecoat base. */

.send-action:active:not(:disabled) {

  transform: scale(0.97);

}

/* Theme toggle.

 *

 * The active rung cannot be rendered server-side: the choice lives in

 * localStorage, so the head script records it on the root element and the

 * selection is expressed here. `button-group` supplies the shrink-wrap

 * (inline-flex w-fit) and the joined borders; without a width the segments

 * would stretch to whatever container they land in.

 */

@layer components {

  .theme-toggle .btn[data-theme-option] {

    color: var(--icon-tertiary);

  }

  :root[data-theme-choice="system"] .theme-toggle .btn[data-theme-option="system"],

  :root[data-theme-choice="light"] .theme-toggle .btn[data-theme-option="light"],

  :root[data-theme-choice="dark"] .theme-toggle .btn[data-theme-option="dark"] {

    background: var(--wash-selected);

    color: var(--icon-primary);

  }

}

    height: 34px;

    border-radius: var(--radius);

    background: var(--ink-raised);

    color-scheme: dark;

    /* Follow the document theme so the native control chrome matches the

       surface it sits on. Forcing dark here left light mode with a dark

       scrubber on a white card. */

    color-scheme: inherit;

  }

  .audio-player:focus-visible {

    assert.doesNotMatch(css, /\.btn-(primary|secondary|ghost|error|success|warning|info)\b/)

    assert.doesNotMatch(css, /--color-base-(100|200|300|content)\b/)

    assert.doesNotMatch(css, /data-theme|prefers-color-scheme/)

    // This previously asserted the cascade contained no `data-theme` or

    // `prefers-color-scheme` at all. That was the right guard for its moment --

    // it proved DaisyUI's theme plugin was gone -- but it forbade ALL theming,

    // including ours. The owner has since asked for a light mode, so the

    // prohibition is replaced by a positive contract: the app ships exactly two

    // themes, keyed off data-theme with a prefers-color-scheme fallback, and

    // neither may reintroduce a third-party theme plugin's tokens.

    assert.match(css, /\[data-theme=["']?light["']?\]/, "the light theme must be compiled")

    assert.match(css, /prefers-color-scheme:\s*light/, "the no-JS light fallback must be compiled")

    assert.doesNotMatch(css, /\[data-theme=["']?(?!light|dark)[a-z]+["']?\]/, "only light and dark are governed themes")

  } finally {

    rmSync(output, {force: true})

  }

      </div>

      <div class="flex items-center gap-2">

        <.theme_toggle />

        <%= if @current_scope do %>

          <.account_dropdown current_scope={@current_scope} />

        <% else %>

      <div class="command-controls">

        {render_slot(@controls)}

        <.theme_toggle />

        <.account_control :if={@current_user} current_user={@current_user} />

      </div>

    </header>

    """

  end

  @doc """

  System / light / dark, as a three-rung segmented control.

  The active rung is not rendered here. The choice lives in `localStorage`, so

  the head script in `root.html.heex` records it as `data-theme-choice` on the

  root element and `app.css` expresses the selection from that. Rendering it

  server-side would be wrong twice over: the server does not know the visitor's

  choice, and a LiveView re-render would fight the script.

  "System" stores nothing and clears `data-theme`, which lets the

  `prefers-color-scheme` fallback in `app.css` govern.

  """

  def theme_toggle(assigns) do

    ~H"""

    <div class="button-group theme-toggle" role="group" aria-label="Color theme">

      <UI.button

        :for={

          {choice, icon, label} <- [

            {"system", "desktop", "Match system theme"},

            {"light", "sun", "Light theme"},

            {"dark", "moon", "Dark theme"}

          ]

        }

        variant={:secondary}

        size={:sm}

        data-theme-option={choice}

        aria-label={label}

        title={label}

        phx-click={JS.dispatch("phx:set-theme", detail: %{theme: choice})}

      >

        <UI.icon name={icon} />

      </UI.button>

    </div>

    """

  end

  @doc """

  The one authenticated identity control: an avatar trigger opening a bounded

  native popover with the same identity and a labeled `LOG OUT` action.

    <link rel="apple-touch-icon" href={~p"/apple-touch-icon.png"} sizes="180x180" />

    <.live_title default="OpenAgents" suffix=" · OpenAgents" phx-no-format>{assigns[:page_title]}</.live_title>

    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />

    <%!-- Runs before first paint, and deliberately not deferred: resolving the

    theme after the stylesheet has painted produces a flash of the wrong theme.

    "system" stores nothing and leaves data-theme unset so the CSS

    prefers-color-scheme fallback governs; an explicit choice sets the

    attribute, which always wins. --%>

    <script phx-no-format>(() => {

      const stored = localStorage.getItem("phx:theme");

      const apply = (choice) => {

        if (choice === "system" || choice === null) {

          localStorage.removeItem("phx:theme");

          document.documentElement.removeAttribute("data-theme");

          document.documentElement.setAttribute("data-theme-choice", "system");

        } else {

          localStorage.setItem("phx:theme", choice);

          document.documentElement.setAttribute("data-theme", choice);

          document.documentElement.setAttribute("data-theme-choice", choice);

        }

      };

      apply(stored);

      window.addEventListener("phx:set-theme", (e) => apply(e.detail?.theme ?? e.target?.dataset?.theme));

      window.addEventListener("storage", (e) => e.key === "phx:theme" && apply(e.newValue));

    })();</script>

    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>

    </script>

  </head>