/* ─────────────────────────────────────────────────────────────
   Ripple AI chat — THEMES.

   Pixel is the default and lives in chat.css's :root. Every other theme
   is defined here as two things:

   1. A SHAPE FAMILY (data-shape on <html>, set by theme-boot.js from the
      registry). `soft` is hairlines, radii and glass instead of clipped
      staircases. The surface primitive in chat.css already draws both;
      this block only supplies the soft family's knobs and the handful of
      marks whose shape (not colour) is pixel-specific.
   2. A PALETTE (data-theme on <html>). Role tokens only — see the ROLE
      TOKENS block in chat.css for what each one means.

   A new soft theme is therefore one palette block below + a registry
   entry in theme-boot.js + its background module. No component rules.

   Contrast was checked for every text role against its worst real
   background (a raindrop head directly behind the panel): all ≥ 4.5:1.
   ───────────────────────────────────────────────────────────── */

/* ═══ SHAPE FAMILY: soft ═════════════════════════════════════════ */

:root[data-shape='soft'] {
  /* corners — the clip scale's soft twin */
  --r-panel: 18px;   /* composer, bubbles, sidebar, overlays */
  --r-menu: 12px;    /* menus, popovers, code blocks, cards  */
  --r-ctl: 12px;     /* buttons and controls                 */
  --r-pill: 999px;   /* chips                                */
  --r-tag: 6px;      /* citations, counts, inline code       */
  --r-opt: 8px;      /* rows inside a menu                   */
  --r-favicon: 3px;
  --r-dot: 50%;

  /* no sides, no depth band, no press-jump */
  --press: 0;
  --lift: 0px;
  --dep: 0px;
  --err-band: 0px;

  /* type: outline faces, smoothed, sentence case, no label tracking */
  --track: 0;
  --case-label: none;
  --case-cta: none;
  --smooth: antialiased;
  --smooth-std: auto;
  --w-title: 600;
  --fs-8: 11px;
  --fs-9: 11.5px;
  --fs-10: 12px;
  --fs-11: 12.5px;
  --fs-12: 13px;
  --fs-code: 13px;
  --fs-cta: 14px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --placeholder-op: 1;

  /* icons and images: drawn smooth, not snapped to the grid */
  --svg-render: auto;
  --svg-cap: round;
  --svg-join: round;
  --img-render: auto;
  --art-render: auto;

  /* marks */
  --caret-w: 2px;
  --quote-w: 2px;
  --link-w: 1px;
  --focus-w: 2px;
  --focus-off: 2px;
  --icon-px: none;
  --icon-soft: inline;

  /* affordances the pixel family draws differently or not at all */
  --picker-chev: block;
  --kbd-hint: inline-flex;

  /* motion */
  --spin-ease: linear;
  --drawer-t: 220ms;
  --drawer-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Shape-only marks. These are the few places where the pixel family
   draws a SHAPE (a hard square, a staircase X) rather than a colour, so a
   token can't carry the change. Colours here are still role tokens. */
:root[data-shape='soft'] {
  & .rp-spinner,
  & .gen-image-spinner {
    background: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--accent);
    -webkit-mask: conic-gradient(#000 0 72%, transparent 0);
    mask: conic-gradient(#000 0 72%, transparent 0);
  }
  & .rp-spinner { box-shadow: inset 0 0 0 1.5px currentColor; }
  & .rp-check { border-radius: 50%; box-shadow: none; }
  & .rp-x::after {
    clip-path: polygon(18% 8%, 50% 40%, 82% 8%, 92% 18%, 60% 50%, 92% 82%, 82% 92%, 50% 60%, 18% 92%, 8% 82%, 40% 50%, 8% 18%);
  }
  /* The tick: Pixel draws a hard square beside a ✓ glyph; soft keeps just
     the glyph, in the accent, on the selected row only. */
  & .mode-option-check {
    width: auto;
    height: auto;
    margin-top: 1px;
    background: none;
    box-shadow: none;
    color: transparent;
    font-size: 13px;
    line-height: 1;
  }
  & .mode-option.is-selected .mode-option-check { background: none; color: var(--accent); }
  & .user-avatar,
  & .image-chip-remove { border-radius: 50%; }

  /* Rows inside menus get a radius; the menus themselves already have one. */
  & .mode-option,
  & .user-menu-item,
  & .conv-action-menu button,
  & .user-menu-trigger,
  & .nav-link,
  & .sidebar-empty { border-radius: var(--r-opt); }
  & .research-progress-step { border-radius: calc(var(--r-menu) - 2px) calc(var(--r-menu) - 2px) 0 0; }
  & .page-footnote a:hover,
  & .credits > summary:hover { border-radius: 4px; }

  /* Markdown tables. Pixel never styled them (it leaves UA defaults), so
     these live with the shape family rather than in chat.css, where they
     would change the default theme. */
  & .msg.assistant .bubble table {
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 14px;
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  & .msg.assistant .bubble th,
  & .msg.assistant .bubble td {
    padding: 7px 14px 7px 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  & .msg.assistant .bubble th {
    font-family: var(--f-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
  }
  & .msg.assistant .bubble tr:last-child td { border-bottom: 0; }
  & .msg.assistant .bubble hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
  & .msg.assistant .bubble strong { font-weight: 600; }

  /* Outline faces need a little air the bitmap faces didn't. */
  & .msg .bubble { line-height: 1.65; }
  & .msg.assistant .bubble h1,
  & .msg.assistant .bubble h2,
  & .msg.assistant .bubble h3 { letter-spacing: -0.01em; }

  /* The disabled pattern is a flat tint in a soft theme; keep its text
     legible rather than relying on the old check tile for contrast. */
  & .toggle-chip:disabled,
  & .rethink-btn:disabled { color: var(--text-dim); }
}

/* ═══ PALETTE: Baarish — a monsoon evening ═══════════════════════
   Night-blue ground, rain-blue accent, dark glass panels the rain shows
   softly through. The rain itself is /themes/baarish.js on a canvas
   behind everything; the 20px grid is the static --page-art below. */

:root[data-theme='baarish'] {
  color-scheme: dark;

  --f-title: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-code: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --page: #0a0f15;
  /* 20px = the rain's character cell (CW/CH in themes/baarish.js); change
     both together or the glyphs stop sitting inside the squares. */
  --page-art:
    linear-gradient(rgba(160, 190, 220, 0.035) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(160, 190, 220, 0.035) 1px, transparent 1px) 0 0 / 20px 20px;
  --page-art-still: var(--page-art);

  --text: #dbe6f0;
  --text-2: rgba(219, 230, 240, 0.68);
  --text-dim: rgba(219, 230, 240, 0.52);
  --text-page: rgba(219, 230, 240, 0.68);
  --placeholder: rgba(219, 230, 240, 0.62);
  --link: #8ec5ff;
  --accent: #8ec5ff;

  --line: rgba(219, 230, 240, 0.11);
  --line-strong: rgba(219, 230, 240, 0.32);
  --line-dim: rgba(219, 230, 240, 0.06);
  --line-focus: rgba(219, 230, 240, 0.28);
  --focus: #8ec5ff;

  --panel: rgba(10, 15, 21, 0.6);
  --bubble: rgba(10, 15, 21, 0.82);
  --menu: rgba(13, 19, 27, 0.96);   /* popovers sit over big type; keep them solid */
  --chip: transparent;
  --key: rgba(219, 230, 240, 0.06);
  --well: rgba(219, 230, 240, 0.03);
  --band: transparent;
  --glass: blur(10px);
  /* The composer is lighter, thinner glass than other panels: the rain
     reads through it, blurred, instead of it reading as a hole in the art. */
  --composer-fill: rgba(24, 32, 44, 0.36);
  --composer-glass: blur(16px) saturate(1.3);

  --hover: rgba(219, 230, 240, 0.07);
  --hover-panel: rgba(219, 230, 240, 0.06);
  --hover-card: rgba(219, 230, 240, 0.06);
  --hover-edge: transparent;
  --hover-sheen: rgba(219, 230, 240, 0.07);
  --hot: rgba(219, 230, 240, 0.09);
  --on-hot: #eef4fa;
  --hot-edge: transparent;

  --sel: rgba(142, 197, 255, 0.14);
  --on-sel: #b7dafd;
  --sel-edge: rgba(142, 197, 255, 0.35);
  --tag: rgba(142, 197, 255, 0.14);
  --on-tag: #a9d3ff;
  --tag-hot: #8ec5ff;
  --on-tag-hot: #0a0f15;
  --badge: #dbe6f0;
  --on-badge: #0a0f15;
  /* Primary actions are tinted glass, not solid blocks: colour on this page
     comes from the rain and the headline, so Sign in and New chat stay
     quiet. Send is the exception once there's something to send. Opaque
     (= the accent at 12% over --page) so rain never runs through a label. */
  --primary: #1a2531;
  --on-primary: #cfe6ff;
  --primary-edge: rgba(142, 197, 255, 0.38);
  --send: #8ec5ff;
  --on-send: #0a0f15;
  --send-edge: #8ec5ff;
  --send-idle: rgba(219, 230, 240, 0.06);
  --on-send-idle: rgba(219, 230, 240, 0.68);
  --send-idle-edge: rgba(219, 230, 240, 0.14);

  /* The two colours of the rain — near drops in rain-blue, far ones in
     dusk-violet (themes/baarish.js) — run through the headline's accent. */
  --accent-ink: linear-gradient(90deg, #8ec5ff, #b3a9ff);
  --accent-ink-fill: transparent;

  --user: rgba(142, 197, 255, 0.1);
  --on-user: #e6eef6;
  --user-edge: rgba(142, 197, 255, 0.22);
  --err: rgba(255, 122, 122, 0.1);
  --on-err: #ffc4c4;
  --err-edge: rgba(255, 122, 122, 0.32);
  --on-stripe: #ffc4c4;

  --code: rgba(4, 7, 11, 0.72);
  --on-code: #dbe6f0;
  --code-border: 1px solid rgba(219, 230, 240, 0.09);
  --code-inline: rgba(219, 230, 240, 0.09);

  --select: rgba(142, 197, 255, 0.35);
  --on-select: #ffffff;
  --thumb: rgba(219, 230, 240, 0.22);
  --thumb-quiet: rgba(219, 230, 240, 0.1);

  /* The pattern tokens are how the pixel family encodes colours it lacks;
     a theme that has the colours just flattens them. */
  --pat-stripe: rgba(255, 122, 122, 0.12);
  --pat-check: rgba(219, 230, 240, 0.04);
  --pat-dither: rgba(4, 7, 11, 0.72);

  /* The mark, re-inked for a dark ground: the white bubble goes dark and
     the outline + lettering go light, so it reads as the same speech
     bubble at night rather than a white sticker on the rain. */
  --mark-filter: invert(1) brightness(0.9);

  --quote-text: rgba(219, 230, 240, 0.78);
}