/*
 * Every --jorar-bot-* token in the product is written here, once. The desktop
 * renderer, the public web app and the mobile app all @import this file; none of
 * them declares a token of its own. That was not true until recently - the same
 * names lived in three files that no single commit had ever touched together, so
 * the web palette was a frozen snapshot of a desktop palette that had moved on by
 * two hundred tokens, and a token added for one surface was simply absent on the
 * other two. Keep this file the only declaration site.
 *
 * The values here are the base, dark palette. The desktop app and the web client
 * layer tokens-light.css on top of this file for their light appearance; mobile
 * layers tokens-native.css. Both change values only; neither declares a new token.
 */

:root {
  --jorar-bot-provider-current: currentcolor;
  /* Main screen canvas and drawer, used by the native app. The desktop also uses the sidebar, the
     sheet (its menus) and the grouped tokens, so tokens-light.css sets them too. */
  --jorar-bot-bg-native-canvas: #06111f;
  --jorar-bot-bg-native-sidebar: #071522;
  /* Grouped sheet surfaces, used by the native app. */
  --jorar-bot-bg-sheet: #071522;
  --jorar-bot-bg-grouped: #0f2134;
  --jorar-bot-text-grouped-secondary: #9aacbf;
  --jorar-bot-border-grouped: #233b53;
  --jorar-bot-radius-grouped: 16px;
  /* The milky chrome of the native app where it has no Liquid Glass: the search field and bar buttons. */
  --jorar-bot-bg-chrome-glass: rgba(7, 21, 34, 0.96);
  --jorar-bot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  /* The fill of that chrome over a real blur, lighter than the solid glass. */
  --jorar-bot-bg-chrome-blur: rgba(7, 21, 34, 0.72);

  /* Neutral color system. Keep UI colors here, not in components. */
  --jorar-bot-bg-canvas: #06111f;
  /* The window frame around the page card, darker than the card, so the card comes forward. */
  --jorar-bot-bg-frame: #040c17;
  /* A rail inside a menu, a step darker than the menu sheet. */
  --jorar-bot-bg-sheet-inset: #040c17;
  --jorar-bot-bg-canvas-clear: rgba(6, 17, 31, 0);
  --jorar-bot-bg-sidebar: #071522;
  --jorar-bot-marketplace-detail-bg: #111111;
  --jorar-bot-bg-surface: #0f2134;
  --jorar-bot-bg-surface-raised: #152b42;
  --jorar-bot-bg-control: #0f2134;
  --jorar-bot-bg-control-hover: #152b42;
  --jorar-bot-bg-control-active: #1b3550;
  --jorar-bot-tabs-bar-bg: #212121;
  --jorar-bot-tabs-pill-bg: #2a2a2a;
  --jorar-bot-bg-overlay: rgba(7, 21, 34, 0.96);
  --jorar-bot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --jorar-bot-dialog-ring: rgba(255, 255, 255, 0.1);
  --jorar-bot-bg-glass: rgba(15, 33, 52, 0.9);

  /* Translucent glass surfaces: the landing page, and the browser dock and previews of the desktop. */
  --jorar-bot-glass-surface: rgba(255, 255, 255, 0.07);
  --jorar-bot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --jorar-bot-glass-border: rgba(255, 255, 255, 0.18);
  --jorar-bot-glass-highlight: rgba(255, 255, 255, 0.12);
  --jorar-bot-glass-shadow: rgba(0, 0, 0, 0.28);
  --jorar-bot-hero-grid-line: rgba(214, 173, 242, 0.09);

  /* The landing price figure, and nothing else: a dark glass "$0" lit by one soft
     iridescent band. These are a material, not aliases of the neutral palette -
     the body sits a shade either side of the canvas so the glyph reads as a solid
     object, and the band is the only warm/cool pair on the page. */
  --jorar-bot-price-metal-high: #4c4c4c;
  --jorar-bot-price-metal-core: #1f1f1f;
  --jorar-bot-price-metal-low: #343434;
  --jorar-bot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --jorar-bot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --jorar-bot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  /* The band has to fade out through its own hue. Fading to --jorar-bot-transparent
     would interpolate towards transparent *black* and leave a dirty grey halo
     above and below the light. */
  --jorar-bot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --jorar-bot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --jorar-bot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --jorar-bot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --jorar-bot-price-rim: rgba(255, 255, 255, 0.28);
  --jorar-bot-price-rim-under: rgba(255, 255, 255, 0.1);
  --jorar-bot-price-glow: rgba(180, 200, 255, 0.22);
  --jorar-bot-bg-host-inset: #101216;
  --jorar-bot-bg-notch: #000000;
  --jorar-bot-mask-solid: #000000;
  --jorar-bot-transparent: rgba(0, 0, 0, 0);
  --jorar-bot-drawer-scrim: #000000;
  --jorar-bot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --jorar-bot-queue-surface: var(--jorar-bot-bg-surface);
  --jorar-bot-queue-border: var(--jorar-bot-border-strong);
  --jorar-bot-queue-text: var(--jorar-bot-text-primary);
  --jorar-bot-queue-action: var(--jorar-bot-text-muted);
  --jorar-bot-border: rgba(164, 195, 221, 0.14);
  --jorar-bot-border-strong: rgba(164, 195, 221, 0.24);
  --jorar-bot-image-outline: rgba(255, 255, 255, 0.1);
  /* Focus is neutral: a grey border or a thin grey ring, never blue and never a halo. */
  --jorar-bot-border-focus: var(--jorar-bot-text-muted);
  --jorar-bot-text-primary: #f5f7fb;
  --jorar-bot-text-on-light: #141414;
  --jorar-bot-surface-light: #f0f0f0;
  /* Not a duplicate of surface-light/text-on-light: tokens-native.css swaps this pair
     between the mobile light and dark themes, so it is the high-contrast button that
     inverts with the theme. Only mobile's uniwind mapping reads it. */
  --jorar-bot-action: #0950c5;
  --jorar-bot-action-foreground: #ffffff;
  --jorar-bot-qr-background: #ffffff;
  /* Ink on paper that is always light, in both themes: a QR code, the onboarding drawing of a
     computer, the profile image that is shared. The on-light tokens above turn dark in the light
     theme, because there they are the inverted element; these never change. */
  --jorar-bot-paper: #f0f0f0;
  --jorar-bot-paper-text: #141414;
  --jorar-bot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --jorar-bot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --jorar-bot-paper-border: rgba(20, 20, 20, 0.14);
  --jorar-bot-onboarding-desktop-mist: #dbe9ff;
  --jorar-bot-onboarding-desktop-blue: #7eb4f2;
  --jorar-bot-onboarding-desktop-indigo: #6f7de8;
  --jorar-bot-onboarding-window: #f3f5f8;
  --jorar-bot-text-secondary: #c6d3e0;
  --jorar-bot-text-muted: #9aacbf;
  --jorar-bot-text-dim: #74889f;
  --jorar-bot-text-readable: rgba(255, 255, 255, 0.52);
  --jorar-bot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --jorar-bot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --jorar-bot-download-card-muted: rgba(20, 20, 20, 0.68);
  --jorar-bot-download-card-chip: rgba(20, 20, 20, 0.1);
  --jorar-bot-download-card-border: rgba(20, 20, 20, 0.16);
  --jorar-bot-download-card-focus: rgba(242, 242, 242, 0.86);
  --jorar-bot-text-placeholder: #bfbfbf;
  --jorar-bot-text-on-accent: #ffffff;
  --jorar-bot-text-on-status: #07130c;
  /* Hue 210, sampled from the reference UIs rather than picked: their status dot is
     #007cf7 and their link and section headings are #42a0ff, both hue 210. The palette
     sat at hue 206, which reads cyan next to them, and accent-text was 71% light,
     which reads washed out. */
  --jorar-bot-accent: #0950c5;
  --jorar-bot-accent-hover: #1264e5;
  --jorar-bot-accent-text: #86b6ff;
  --jorar-bot-accent-soft: rgba(9, 80, 197, 0.18);
  --jorar-bot-accent-strong: rgba(9, 80, 197, 0.38);
  --jorar-bot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --jorar-bot-provider-codex: var(--jorar-bot-text-primary);
  --jorar-bot-provider-claude: #d97757;
  --jorar-bot-provider-grok: var(--jorar-bot-text-primary);
  /* The Gemini brand colour that Simple Icons gives. */
  --jorar-bot-provider-antigravity: #8e75b2;
  /* A chart series needs a hue of its own: the logo colours above give codex and grok the
     same white, which no reader can tell apart in two overlaid areas. Validated together
     with the dataviz skill's checker -
     node scripts/validate_palette.js "#d6adf2,#d97757,#6bc7d9" --mode dark --surface "#1a1a1a"
     - for colour-vision separation and contrast on the canvas. */
  --jorar-bot-chart-series-codex: #d6adf2;
  --jorar-bot-chart-series-claude: var(--jorar-bot-provider-claude);
  --jorar-bot-chart-series-grok: #6bc7d9;
  --jorar-bot-chart-series-other: var(--jorar-bot-text-muted);
  /* The storage bar: five hues in this fixed order, then neutral app data. Validated with
     node scripts/validate_palette.js "#3987e5,#d95926,#199e70,#9085e9,#c98500" --mode dark --surface "#1a1a1a"
     and again on #212121. */
  --jorar-bot-chart-storage-workspaces: #3987e5;
  --jorar-bot-chart-storage-files: #d95926;
  --jorar-bot-chart-storage-chats: #199e70;
  --jorar-bot-chart-storage-downloads: #9085e9;
  --jorar-bot-chart-storage-runtimes: #c98500;
  --jorar-bot-chart-storage-app: var(--jorar-bot-text-dim);
  --jorar-bot-logo-production: #06111f;
  --jorar-bot-logo-eye: #f5f7fb;
  /* The eyes of the release logo. The logo color setting changes it with `--jorar-bot-logo-production`;
     a dev or preview logo keeps `--jorar-bot-logo-eye`. */
  --jorar-bot-logo-production-eye: var(--jorar-bot-logo-eye);
  /* The build colors of the logo match the app icons in `build/icon-*.png`, so the Dock, the app
     and the Dynamic Island show one color for each build. They are brand colors, not status
     colors: a change to warning or success does not change them. */
  --jorar-bot-logo-dev: #e3b866;
  --jorar-bot-logo-preview: #61c985;
  --jorar-bot-unread-surface: #74b9ff;
  --jorar-bot-unread-text: #07131f;
  /* The last hue that had not been retuned with the rest. #61c985 was OKLCH chroma
     0.139 while accent, warning and danger now average 0.205, so green was the one
     family member that still read as a disabled tint beside them. Matching 0.205 is
     not possible: sRGB tops out at 0.195 along this hue, and that ceiling value
     (#00d271) is a neon with no headroom, which every renderer clips differently.
     0.180 is the usable step, and lightness is held at the old 0.756 so contrast on
     the canvas is unchanged at 8.5:1 and no text legibility moves. */
  --jorar-bot-success: #2ee6c5;
  /* Status text sits on neutral surfaces; status fills have separate contrast needs. */
  --jorar-bot-success-text: #2ee6c5;
  --jorar-bot-warning-text: #ff9412;
  --jorar-bot-danger-text: #ff6069;
  --jorar-bot-success-soft: rgba(49, 207, 118, 0.12);
  --jorar-bot-success-wash: rgba(49, 207, 118, 0.045);
  /* Both warning marks in the reference measure hue 33 at full saturation (#ff9917 on
     the triangle, #ff9412 on the heading). The palette's #e3b866 was a desaturated gold
     at hue 39, which reads as a disabled state rather than as something needing attention. */
  --jorar-bot-warning: #ff9412;
  --jorar-bot-warning-soft: rgba(255, 148, 18, 0.12);
  --jorar-bot-question-option: #6bc7d9;
  --jorar-bot-question-option-soft: rgba(107, 199, 217, 0.14);
  --jorar-bot-question-option-hover: rgba(107, 199, 217, 0.2);
  --jorar-bot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --jorar-bot-island-identity-name: var(--jorar-bot-text-primary);
  --jorar-bot-question-badge-text: #8bdee8;
  --jorar-bot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --jorar-bot-message-badge-text: #91c8ff;
  --jorar-bot-message-badge-soft: rgba(116, 185, 255, 0.16);
  /* The "new thing is available" pill. It is deliberately not --jorar-bot-accent: an
     announcement is not an action. */
  --jorar-bot-badge-new: #ff1e5e;
  --jorar-bot-badge-new-soft: rgba(255, 30, 94, 0.16);
  /* The moving border of an offer, such as the hosted server offer: teal, blue, then pink. */
  --jorar-bot-beam-teal: var(--jorar-bot-file-teal);
  --jorar-bot-beam-blue: var(--jorar-bot-accent-text);
  --jorar-bot-beam-pink: var(--jorar-bot-file-pink);
  --jorar-bot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  /* One red. The palette carried four families - danger (#e47d75), danger-strong
     (#ff4058), settings-danger (#eb4145) and button-destructive (oklch, #ff6467) -
     all between hue 352 and 359, i.e. the same red at four saturations, and the
     settings family existed only to re-override button-destructive inside one modal.
     #fd2f3b is the reference's count badge. The five steps below are roles, not
     shades: solid fill, its hover, tinted fill, its hover, ring, border. */
  --jorar-bot-danger: #fd2f3b;
  --jorar-bot-danger-hover: #fd5d67;
  --jorar-bot-danger-soft: rgba(253, 47, 59, 0.16);
  --jorar-bot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --jorar-bot-danger-focus: rgba(253, 47, 59, 0.4);
  --jorar-bot-danger-border: rgba(253, 47, 59, 0.5);
  /* Literal values: the mobile themes repeat these in tokens-native.css, where var() resolves to
   * nothing. They equal warning, question-option, success, danger and accent-text. */
  --jorar-bot-file-blue: #74b9ff;
  --jorar-bot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --jorar-bot-file-yellow: #ff9412;
  --jorar-bot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --jorar-bot-file-orange: #f0a06a;
  --jorar-bot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --jorar-bot-file-teal: #6bc7d9;
  --jorar-bot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --jorar-bot-file-green: #31cf76;
  --jorar-bot-file-green-soft: rgba(49, 207, 118, 0.12);
  --jorar-bot-file-red: #fd2f3b;
  --jorar-bot-file-red-soft: rgba(253, 47, 59, 0.16);
  --jorar-bot-file-pink: #d98ac9;
  --jorar-bot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --jorar-bot-file-default: #42a0ff;
  --jorar-bot-file-default-soft: rgba(0, 124, 247, 0.14);
  --jorar-bot-data-table-border: #303030;
  --jorar-bot-data-table-header-text: #a1a1a1;
  --jorar-bot-data-table-text: #f5f5f5;
  --jorar-bot-data-table-outer-border: rgba(255, 255, 255, 0);
  --jorar-bot-data-table-ring: rgba(255, 255, 255, 0.12);
  --jorar-bot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --jorar-bot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --jorar-bot-shadow-menu: rgba(0, 0, 0, 0.45);
  --jorar-bot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --jorar-bot-shadow-ring: rgba(228, 228, 228, 0.04);
  --jorar-bot-border-on-light: rgba(20, 20, 20, 0.14);
  --jorar-bot-hover: rgba(255, 255, 255, 0.06);
  --jorar-bot-font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jorar-bot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  /* Six steps, one line-height each, named for the step it pairs with. The scale had
   * sixteen sizes and eight line-heights, four of them a single call site, which is how
   * an 11px size ended up paired with a 26px line-height. scripts/ui-foundation-check.ts
   * holds "untokenized font-size" at zero, so a size that is not here has nowhere to go. */
  --jorar-bot-text-sm: 12px;
  --jorar-bot-text-md: 13px;
  --jorar-bot-text-lg: 14px;
  --jorar-bot-text-xl: 16px;
  --jorar-bot-text-2xl: 18px;
  --jorar-bot-text-3xl: 24px;
  --jorar-bot-leading-sm: 16px;
  --jorar-bot-leading-md: 18px;
  --jorar-bot-leading-lg: 20px;
  --jorar-bot-leading-xl: 22px;
  --jorar-bot-leading-2xl: 24px;
  --jorar-bot-leading-3xl: 30px;

  /* Not scale steps, and named for their surface so they do not read as one. Three
   * full-bleed screens (login wordmark, first-run setup, onboarding) and the public
   * landing page carry type above 24px; .landing-hero-logo is sized in em off
   * --jorar-bot-text-hero, so that token is layout, not just type. */
  --jorar-bot-text-display: 32px;
  --jorar-bot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --jorar-bot-leading-display: 38px;
  --jorar-bot-text-hero: clamp(3rem, 8vw, 6.5rem);

  /* Glyphs, not copy: a file-extension string inside a fixed 16-24px chip. Below the
   * scale's floor because the container is fixed, not because the text is small. Outside
   * the text-* namespace so text-* means exactly the six steps above. */
  --jorar-bot-glyph-xs: 7px;
  --jorar-bot-glyph-sm: 8px;

  --jorar-bot-weight-regular: 400;
  --jorar-bot-weight-medium: 500;
  --jorar-bot-weight-semibold: 600;
  --jorar-bot-weight-bold: 700;
  --jorar-bot-tracking-tight: -0.1px;
  --jorar-bot-tracking-normal: 0;
  --jorar-bot-tracking-wide: 0.02em;
  --jorar-bot-space-0-5: 2px;
  --jorar-bot-space-1: 4px;
  --jorar-bot-space-1-5: 6px;
  --jorar-bot-space-2: 8px;
  --jorar-bot-space-3: 12px;
  --jorar-bot-space-4: 16px;
  --jorar-bot-space-6: 24px;
  --jorar-bot-space-8: 32px;
  --jorar-bot-scrollbar-size: 8px;
  --jorar-bot-radius-xs: 4px;
  --jorar-bot-radius-sm: 6px;
  --jorar-bot-radius-md: 8px;
  --jorar-bot-radius-lg: 12px;
  --jorar-bot-radius-card: 14px;
  --jorar-bot-radius-xl: 20px;
  --jorar-bot-radius-bubble: 22px;
  --jorar-bot-radius-bubble-inset: calc(var(--jorar-bot-radius-bubble) - var(--jorar-bot-space-3) - 1px);
  --jorar-bot-radius-modal: 30px;
  --jorar-bot-radius-media-preview: calc(var(--jorar-bot-radius-lg) - 1px);
  --jorar-bot-radius-pill: 999px;
  --jorar-bot-radius-logo: 20%;
  --jorar-bot-control-xs: 24px;
  --jorar-bot-control-sm: 28px;
  --jorar-bot-control-md: 32px;
  --jorar-bot-control-lg: 36px;
  --jorar-bot-control-xl: 40px;
  /* The switch follows the same compact pill proportions across desktop and web.
   * Keep its geometry named so the motion code can measure the same inset and travel
   * that CSS paints. */
  --jorar-bot-switch-width: 36px;
  --jorar-bot-switch-height: 20px;
  --jorar-bot-switch-thumb: 16px;
  --jorar-bot-switch-inset: 2px;
  --jorar-bot-switch-sm-width: 24px;
  --jorar-bot-switch-sm-height: 14px;
  --jorar-bot-switch-sm-thumb: 12px;
  --jorar-bot-switch-sm-inset: 1px;
  /* Unitless on purpose. Lucide icons carry viewBox="0 0 24 24", so CSS stroke-width
   * resolves in user units, not px: a literal 1px paints 1 * (16/24) = 0.67 device px at
   * the 16px default size and reads blurry. 1.5 user units is the 1px the design asks for.
   *
   * Which is also why three kinds of SVG keep a weight of their own rather than reading
   * this: the hand-written icons under src/renderer/src/features draw on a 16- or 20-unit
   * viewBox, so the same number paints a different device weight there; the onboarding
   * computer is a drawing, not an icon; and the checkbox tick would come out at 0.75
   * device px inside its 12px box. Every lucide icon in the renderer reads this token. */
  --jorar-bot-icon-stroke: 1.5;
  --jorar-bot-icon-xs: 12px;
  --jorar-bot-icon-sm: 14px;
  --jorar-bot-icon-md: 16px;
  --jorar-bot-icon-lg: 20px;
  --jorar-bot-chat-entry-gap: var(--jorar-bot-space-3);
  --jorar-bot-chat-marker-gap: var(--jorar-bot-space-1);
  --jorar-bot-chat-marker-height: var(--jorar-bot-control-xs);
  --jorar-bot-chat-marker-avatar: var(--jorar-bot-icon-md);
  /* Keep container-relative calculations at the CSS use site for native consumers. */
  --jorar-bot-chat-marker-width: 680px;
  --jorar-bot-duration-fast: 120ms;
  --jorar-bot-duration-hover: 0ms;
  --jorar-bot-duration-dialog: 100ms;
  --jorar-bot-duration-normal: 160ms;
  --jorar-bot-duration-slow: 200ms;
  --jorar-bot-duration-overlay: 240ms;
  --jorar-bot-duration-toast-enter: 340ms;
  --jorar-bot-duration-toast-exit: 220ms;
  --jorar-bot-duration-island-content: 340ms;
  --jorar-bot-duration-island-content-exit: 220ms;
  --jorar-bot-agent-activity-exit-delay: 500ms;
  /* A loading indicator waits this long, so a fast answer replaces it before it shows. */
  --jorar-bot-loading-indicator-delay: 400ms;
  --jorar-bot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --jorar-bot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --jorar-bot-shadow-raised: 0 12px 32px var(--jorar-bot-shadow-popover-ambient);
  --jorar-bot-shadow-card: 0 0 0 transparent;
  --jorar-bot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --jorar-bot-focus-ring: 0 0 0 1px var(--jorar-bot-border-focus);
  --jorar-bot-layer-dropdown: 40;
  --jorar-bot-layer-popover: 60;
  --jorar-bot-layer-dialog: 100;
  /* A dialog that opens other surfaces over itself, such as the marketplace. Its own menus take
     one above it, and a dialog it opens takes two, so the order is stated once here instead of
     being re-derived by arithmetic at each surface - where a tie is decided by insertion order,
     and the surface opened last wins only by accident. */
  --jorar-bot-layer-dialog-host: calc(var(--jorar-bot-layer-dialog) + var(--jorar-bot-layer-popover));
  --jorar-bot-layer-toast: 120;
  /* A tooltip names the control under the pointer. It shows above every other layer, also above
     a dialog or a menu that holds the control. */
  --jorar-bot-layer-tooltip: 240;
}

/* Every surface that paints a provider - the picker mark, the update toast and its progress bar,
   the usage icon, the account picker, the landing page - used to carry one rule per provider per
   surface, so a new provider meant ten new rules across five stylesheets before it had a colour.
   These rules are the only place a provider id meets its colour; a surface writes
   `data-provider` on the element and reads `--jorar-bot-provider-current`. A provider with no rule
   here falls back to the current text colour rather than to another provider's brand. */
[data-provider] {
  --jorar-bot-provider-current: currentcolor;
}

[data-provider="codex"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-codex);
}

[data-provider="claude"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-claude);
}

[data-provider="grok"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-grok);
}

[data-provider="opencode"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

[data-provider="antigravity"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-antigravity);
}

[data-provider="cursor"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

[data-provider="cline"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

[data-provider="acp"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -200px, var(--jorar-bot-accent-soft), transparent), var(--jorar-bot-bg-canvas);
  color: var(--jorar-bot-text-primary);
  font-family: var(--jorar-bot-font-sans);
  line-height: 1.55;
}
a { color: var(--jorar-bot-accent-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: var(--jorar-bot-bg-chrome-blur);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--jorar-bot-border);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 600; }
.brand img { border-radius: 9px; }
main { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 64px; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 0 40px; }
.hero img { border-radius: 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); }
.hero h1 { margin: 24px 0 8px; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.1; }
.hero p { max-width: 640px; margin: 0; color: var(--jorar-bot-text-muted); font-size: 1.125rem; }
.steps { margin: 0 auto 48px; max-width: 760px; padding: 24px 28px; border: 1px solid var(--jorar-bot-border); border-radius: 18px; background: var(--jorar-bot-bg-surface); }
.steps h2 { margin: 0 0 12px; font-size: 1.1rem; }
.steps ol { margin: 0; padding-left: 1.3em; color: var(--jorar-bot-text-muted); }
.steps li + li { margin-top: 6px; }
.search input {
  width: 100%; margin-bottom: 20px; padding: 14px 18px;
  border: 1px solid var(--jorar-bot-border-strong); border-radius: 12px;
  background: var(--jorar-bot-bg-control); color: inherit; font: inherit;
}
.search input:focus { outline: 2px solid var(--jorar-bot-accent); outline-offset: 2px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card a {
  display: block; height: 100%; padding: 20px 22px;
  border: 1px solid var(--jorar-bot-border); border-radius: 16px;
  background: var(--jorar-bot-bg-surface); color: inherit; text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.card a:hover, .card a:focus-visible { border-color: var(--jorar-bot-border-strong); background: var(--jorar-bot-bg-surface-raised); transform: translateY(-2px); }
.card h3 { margin: 8px 0 6px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--jorar-bot-text-muted); }
.category { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--jorar-bot-accent-soft); color: var(--jorar-bot-accent-text); font-size: 0.8rem; font-weight: 600; }
.empty { text-align: center; color: var(--jorar-bot-text-muted); padding: 32px 0; }
.back { display: inline-block; margin-top: 32px; text-decoration: none; }
.skill h1 { margin: 12px 0 6px; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
.lead { margin: 0 0 28px; color: var(--jorar-bot-text-muted); font-size: 1.15rem; }
.install, .instructions { padding: 24px 28px; border: 1px solid var(--jorar-bot-border); border-radius: 18px; background: var(--jorar-bot-bg-surface); }
.install { margin-bottom: 24px; }
.install h2, .instructions > h2 { margin: 0 0 12px; font-size: 1.05rem; }
.install pre {
  margin: 0 0 16px; padding: 16px; white-space: pre-wrap; word-break: break-word;
  border-radius: 12px; background: var(--jorar-bot-bg-frame); border: 1px solid var(--jorar-bot-border);
  font-family: var(--jorar-bot-font-mono); font-size: 0.9rem;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: var(--jorar-bot-accent); color: var(--jorar-bot-text-primary); font: inherit; font-weight: 600; text-decoration: none;
}
.button:hover { background: var(--jorar-bot-accent-hover); }
.button.secondary { background: var(--jorar-bot-bg-control); border-color: var(--jorar-bot-border-strong); color: var(--jorar-bot-text-primary); }
.button.secondary:hover { background: var(--jorar-bot-bg-control-hover); }
.status { min-height: 1.5em; margin: 10px 0 0; color: var(--jorar-bot-text-muted); }
.instructions code { font-family: var(--jorar-bot-font-mono); }
footer { padding: 32px 16px 48px; text-align: center; color: var(--jorar-bot-text-muted); font-size: 0.9rem; border-top: 1px solid var(--jorar-bot-border); }