/*
 * @sigmashake/design-tokens — canonical CSS custom properties.
 * Mirrors tokens.ts. Plain `:root` (not Tailwind @theme) so every surface can
 * @import it, including the non-Tailwind Electrobun webviews.
 *
 * Tailwind surfaces (sigmashake-web SPA, sigmashake-gov dashboard) keep their own
 * `@theme` block for utility generation but MUST use these exact hexes for the
 * --ss-brand-* family. See each surface's index.css.
 */

:root {
  /* Brand — sigma mark. field #000000, mark #FF0000, edge #FFFFFF. */
  --ss-brand: #FF0000;
  --ss-brand-hover: #FF0000;
  --ss-brand-on: #000000;
  --ss-brand-field: #000000;
  --ss-brand-edge: #FFFFFF;
  --ss-brand-tint: rgba(255, 0, 0, 0.14);

  /* Decision palette (light) */
  --ss-decision-allow: #34c759;
  --ss-decision-block: #ff3b30;
  --ss-decision-ask: #ff9500;
  --ss-decision-force: #5ac8fa;
  --ss-decision-log: #af52de;
  --ss-decision-shadow: #8e8e93;

  /* Radius scale */
  --ss-radius-xs: 4px;
  --ss-radius-sm: 6px;
  --ss-radius-md: 8px;
  --ss-radius-lg: 10px;
  --ss-radius-xl: 12px;
  --ss-radius-2xl: 16px;
  --ss-radius-pill: 999px;

  /* Type */
  --ss-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", "Inter Tight",
    system-ui, sans-serif;
  --ss-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
    Menlo, Consolas, monospace;
}

/*
 * App shell tokens. Used by shell.css.
 * Dark is the default theme. It applies when no data-theme is set.
 * [data-theme="light"] gives the light theme. [data-theme="contrast"] gives the high-contrast theme.
 * [data-theme="dark"] forces dark. The setting of the operating system does not change the theme.
 * The light and contrast blocks are at the end of this file.
 * Colors are the sigma mark plus pure grays between #000000 and #FFFFFF. No hue is added.
 * The presence roles are the one exception. A status needs a hue and a shape.
 * Red is for fills, badges, unread and selected marks, and the focus ring. It is never body text.
 * Keep this block above the first media query. The Go test reads only the text above it.
 */

/* Dimensions, type, and motion. They do not change with the theme. */
:root {
  /* Dimensions. Recalled from two chat apps. UNVERIFIED. */
  --ss-shell-rail-w: 72px;
  --ss-shell-rail-icon: 48px;
  --ss-shell-sidebar-w: 240px;
  --ss-shell-header-h: 48px;
  --ss-shell-search-h: 36px;
  --ss-shell-userpanel-h: 52px;
  --ss-shell-detail-w: 340px;
  --ss-row-h: 32px;
  --ss-row-radius: 6px;
  --ss-msg-avatar: 40px;
  --ss-msg-gutter: 72px;
  --ss-msg-gap: 16px;
  --ss-msg-pad: 2px;

  /* Type. Open fonts only. No font file ships with the tokens. */
  --ss-font-ui: "Noto Sans", "Lato", -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI",
    "Inter Tight", system-ui, sans-serif;
  --ss-fs-xs: 12px;
  --ss-fs-sm: 14px;
  --ss-fs-md: 16px;
  --ss-fs-lg: 20px;
  --ss-fs-xl: 24px;
  --ss-lh-msg: 1.375;
  --ss-section-fs: 12px;
  --ss-section-fw: 700;
  --ss-section-ls: 0.02em;

  /* Motion. */
  --ss-dur-fast: 100ms;
  --ss-dur: 150ms;
  --ss-dur-slow: 250ms;
  --ss-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Shadows. */
  --ss-shadow-low: 0 1px 0 rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.16);
  --ss-shadow-high: 0 8px 24px rgba(0, 0, 0, 0.48);
}

/* Compact density: a lower row height and less message space. */
[data-density="compact"] {
  --ss-row-h: 28px;
  --ss-msg-gap: 8px;
  --ss-msg-pad: 0px;
}

/* Dark roles. Default. */
:root,
[data-theme="dark"] {
  --ss-scheme: dark;

  /* Surfaces. rail #000000, sidebar, main, then floating. */
  --ss-bg-rail: #000000;
  --ss-bg-sidebar: #0a0a0a;
  --ss-bg-main: #121212;
  --ss-bg-header: #121212;
  --ss-bg-detail: #0a0a0a;
  --ss-bg-floating: #1a1a1a;
  --ss-bg-input: #0a0a0a;
  --ss-bg-hover: #1a1a1a;
  --ss-bg-selected: #262626;
  --ss-bg-active: #303030;
  --ss-bg-backdrop: rgba(0, 0, 0, 0.72);
  --ss-bg-sidebar-hover: #1a1a1a;
  --ss-bg-sidebar-selected: #262626;
  --ss-bg-sidebar-active: #303030;
  --ss-border-subtle: #262626;
  --ss-border-strong: #757575;
  --ss-border-sidebar: #262626;

  /* Text. */
  --ss-text-normal: #d9d9d9;
  --ss-text-muted: #9e9e9e;
  --ss-text-header: #ffffff;
  --ss-text-link: #ffffff;
  --ss-text-on-accent: #000000;
  --ss-text-sidebar: #d9d9d9;
  --ss-text-sidebar-muted: #9e9e9e;
  --ss-text-sidebar-header: #ffffff;

  /* Interactive. */
  --ss-interactive-normal: #a3a3a3;
  --ss-interactive-hover: #d9d9d9;
  --ss-interactive-active: #ffffff;
  --ss-interactive-muted: #757575;
  --ss-accent: #ff0000;
  --ss-focus-ring: #ff0000;

  /* Presence. Each is 3:1 or more on the rail, sidebar, and pane surfaces. */
  --ss-presence-online: #30d158;
  --ss-presence-idle: #ff9f0a;
  --ss-presence-dnd: #ff453a;
  --ss-presence-offline: #98989d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ss-brand: #FF0000;
    --ss-brand-hover: #FF0000;
    --ss-brand-on: #000000;
    --ss-brand-field: #000000;
    --ss-brand-edge: #FFFFFF;
    --ss-brand-tint: rgba(255, 0, 0, 0.18);

    --ss-decision-allow: #30d158;
    --ss-decision-block: #ff453a;
    --ss-decision-ask: #ff9f0a;
    --ss-decision-force: #64d2ff;
    --ss-decision-log: #bf5af2;
    --ss-decision-shadow: #98989d;
  }
}

/*
 * App shell light roles.
 * The rail and the sidebar stay on the black field. The main pane is white.
 * Sidebar text roles stay light.
 * The presence colors are darker than in the dark theme. Each is 3:1 or more on white and on black.
 */
[data-theme="light"] {
  --ss-scheme: light;

  --ss-bg-rail: #000000;
  --ss-bg-sidebar: #0a0a0a;
  --ss-bg-main: #ffffff;
  --ss-bg-header: #ffffff;
  --ss-bg-detail: #f5f5f5;
  --ss-bg-floating: #ffffff;
  --ss-bg-input: #f5f5f5;
  --ss-bg-hover: #f0f0f0;
  --ss-bg-selected: #e8e8e8;
  --ss-bg-active: #e0e0e0;
  --ss-bg-backdrop: rgba(0, 0, 0, 0.6);
  --ss-bg-sidebar-hover: #1a1a1a;
  --ss-bg-sidebar-selected: #262626;
  --ss-bg-sidebar-active: #303030;
  --ss-border-subtle: #e0e0e0;
  --ss-border-strong: #767676;
  --ss-border-sidebar: #262626;

  --ss-text-normal: #262626;
  --ss-text-muted: #595959;
  --ss-text-header: #000000;
  --ss-text-link: #000000;
  --ss-text-on-accent: #000000;
  --ss-text-sidebar: #d9d9d9;
  --ss-text-sidebar-muted: #9e9e9e;
  --ss-text-sidebar-header: #ffffff;

  --ss-interactive-normal: #595959;
  --ss-interactive-hover: #262626;
  --ss-interactive-active: #000000;
  --ss-interactive-muted: #767676;
  --ss-accent: #ff0000;
  --ss-focus-ring: #ff0000;

  --ss-presence-online: #1e8a3c;
  --ss-presence-idle: #b35f00;
  --ss-presence-dnd: #d70015;
  --ss-presence-offline: #767676;
}

/*
 * App shell contrast roles. A high-contrast theme.
 * Every surface is black. Every border and every text is white.
 * The accent and the focus ring are white, so a selected mark and a ring show on any surface.
 * Text on the accent is black.
 */
[data-theme="contrast"] {
  --ss-scheme: dark;

  --ss-bg-rail: #000000;
  --ss-bg-sidebar: #000000;
  --ss-bg-main: #000000;
  --ss-bg-header: #000000;
  --ss-bg-detail: #000000;
  --ss-bg-floating: #000000;
  --ss-bg-input: #000000;
  --ss-bg-hover: #242424;
  --ss-bg-selected: #333333;
  --ss-bg-active: #404040;
  --ss-bg-backdrop: rgba(0, 0, 0, 0.85);
  --ss-bg-sidebar-hover: #242424;
  --ss-bg-sidebar-selected: #333333;
  --ss-bg-sidebar-active: #404040;
  --ss-border-subtle: #ffffff;
  --ss-border-strong: #ffffff;
  --ss-border-sidebar: #ffffff;

  --ss-text-normal: #ffffff;
  --ss-text-muted: #ffffff;
  --ss-text-header: #ffffff;
  --ss-text-link: #ffffff;
  --ss-text-on-accent: #000000;
  --ss-text-sidebar: #ffffff;
  --ss-text-sidebar-muted: #ffffff;
  --ss-text-sidebar-header: #ffffff;

  --ss-interactive-normal: #ffffff;
  --ss-interactive-hover: #ffffff;
  --ss-interactive-active: #ffffff;
  --ss-interactive-muted: #ffffff;
  --ss-accent: #ffffff;
  --ss-focus-ring: #ffffff;

  --ss-presence-online: #30d158;
  --ss-presence-idle: #ff9f0a;
  --ss-presence-dnd: #ff453a;
  --ss-presence-offline: #ffffff;
}