/* ShareOS identity — Share Ventures Design System 2.0.1
 * sharevc/design-system@77c19d40f8c4a75fdbc1a56d546eac9afa052308
 * Identity only: the palette and role tokens, the one dark palette, the
 * wordmark and Clerk's skin. Aeonik is served from this product’s existing
 * licensed font asset. */

@font-face {
  font-family: "Aeonik Pro";
  /* At its bytes' hash (server/static.ts): cached for good, not asked again on every open, so text
   * never paints in the fallback first. Another file at this path is only asked for again. */
  src: url("fonts/aeonikprovf.woff2?v=GnjTZBRKdx8d") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sv-black: #000000;
  --sv-white: #ffffff;
  /* The Share mark is pure black or white, never a theme's near-black or near-white ink. */
  --sv-brand-ink: var(--sv-black);
  --sv-off-white: #e8e6e4;
  --sv-home-bg: #f1f4f5;
  --sv-gray-light: #c8cbcc;
  --sv-gray-mid: #939799;
  --sv-gray-mid-ink: var(--sv-gray-dark);
  --sv-gray-dark: #5e6366;
  --sv-gray-xdark: #2b3033;
  --sv-green: #00d65d;

  /* Role tokens. Every rule in this file paints through these, never through a
   * raw palette swatch, so a mode is a redefinition here and nothing else.
   *
   *   surface        the page ground            surface-raised  cards, dialogs
   *   surface-sunken wells, code chips          surface-dim     selection, fills
   *   inverse-surface the deliberately opposite plate (user bubble, toast, menus,
   *                   primary buttons) — dark on light, light-lifted on dark
   *   ink / -secondary / -tertiary   primary, supporting, faint text
   *   hairline / -strong / -max   structure, in ascending weight
   *   on-accent      ink used ON green; always true black (white on green is
   *                  1.95:1, black on green is 10.78:1) */
  --sv-surface: var(--sv-home-bg);
  --sv-surface-raised: var(--sv-white);
  --sv-surface-sunken: var(--sv-off-white);
  --sv-surface-dim: var(--sv-gray-light);
  --sv-inverse-surface: var(--sv-black);
  --sv-inverse-ink: var(--sv-white);
  --sv-inverse-ink-secondary: var(--sv-gray-light);
  --sv-ink: var(--sv-black);
  --sv-ink-secondary: var(--sv-gray-dark);
  --sv-ink-tertiary: var(--sv-gray-mid-ink);
  --sv-hairline: var(--sv-gray-light);
  --sv-hairline-strong: var(--sv-gray-mid);
  --sv-hairline-max: var(--sv-black);
  /* Declared literally, not as var(--sv-ink): custom properties resolve where
   * they are declared, so a derived value would freeze to the light palette and
   * inherit into the dark rail unchanged. Every scope below restates the pair. */
  --sv-emphasis-surface: #000000;
  --sv-emphasis-ink: #ffffff;
  --sv-on-accent: #000000;
  /* Danger is a pair: the inverse value remains legible on dark chrome. */
  --sv-danger: #b42318;
  --sv-danger-inverse: #f2807c;
  --sv-attention: #9a6700;
  --sv-accent: var(--sv-green);

  /* Fills: contrast comes from tone, never from a border, outline or bar.
   * Ink at rising strength over whatever lies under it, so a fill reads on
   * any surface, tint or theme. Literal values, restated in the dark palette
   * (a var() would freeze to this palette where it is declared).
   *
   *   fill-1  hover on a plain surface; a quiet chip
   *   fill-2  a card or well: one step off the surface
   *   fill-3  hover on a card; a selected row
   *   fill-4  pressed; a selected card or tile
   *   fill-5  the strongest neutral: a thin ring or stripe, pressing a selection */
  --sv-fill-1: rgb(0 0 0 / 0.04);
  --sv-fill-2: rgb(0 0 0 / 0.06);
  --sv-fill-3: rgb(0 0 0 / 0.09);
  --sv-fill-4: rgb(0 0 0 / 0.13);
  --sv-fill-5: rgb(0 0 0 / 0.18);

  --sv-font-sans: "Aeonik Pro", Arial, sans-serif;
  /* All ordinary product text uses one size, including metadata and badges;
   * compact layouts change spacing, not type. */
  --sv-text-h3: 1.25rem;
  --sv-text-h4: 1.125rem;
  --sv-text-body: 1rem;
  --sv-leading-heading: 1.1;
  --sv-leading-body: 1.6;
  --sv-tracking-caps: 0.04em;

  --sv-space-1: 0.25rem;
  --sv-space-2: 0.5rem;
  --sv-space-3: 0.75rem;
  --sv-space-4: 1rem;
  --sv-space-5: 1.25rem;
  --sv-space-6: 1.5rem;
  --sv-space-8: 2rem;

  --sv-gutter: clamp(1.25rem, 4vw, 4rem);
  --sv-rail: 18rem;
  --sv-radius: 0;
  --sv-hairline-w: 1px;

  --sv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --sv-dur-instant: 100ms;
  --sv-dur-fast: 200ms;
  --sv-dur-base: 300ms;
  --sv-dur-slow: 600ms;
  --sv-dur-cine: 1000ms;
  --sv-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.16);
  --sv-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Glass roles — the CONTROL layer's material. A rule that paints a control
   * group (the rail's command dock, its chips) uses these. Messages are flat
   * fills (--sv-fill-*), never glass (Rey, 2026-10-28). Content never sits behind a blur; code blocks and tables stay opaque.
   *
   *   glass-tint / -raised / -sunken   translucent fills: the pane, a lifted
   *                                    chip, a recessed well
   *   glass-blur                       the backdrop blur+saturate behind the
   *                                    tint
   *   glass-rim / -lo                  the inset 1px specular rim (top
   *                                    highlight) and its lower edge
   *
   * Scopes that redefine surface/ink (workspace.css, the always-light rail)
   * restate these, and workspace.css degrades every one of them to today's
   * solid surfaces under prefers-reduced-transparency and where
   * backdrop-filter is unsupported. */
  --sv-glass-tint: rgb(255 255 255 / 0.66);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.86);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.05);
  --sv-glass-blur: blur(14px) saturate(140%);
  --sv-glass-rim: rgb(255 255 255 / 0.75);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.07);

  --sv-z-nav: 100;
  --sv-z-overlay: 200;
  --sv-z-toast: 400;
}

/* The one dark palette. The same role tokens serve chat, Admin, Operations
 * and shared conversations; the S and the CTA retain their black/white and
 * black/green identity. The workspace's own roles (tokens.css) darken here
 * too: soft ink on a deep neutral, not pure white on gray, and wells (code,
 * table heads, thinking) sink below the bubble they sit in, never lift.
 * :root.theme-dark, not .theme-dark, so it outranks tokens.css's :root. */
:root.theme-dark {
  color-scheme: dark;
  --sv-brand-ink: var(--sv-white);
  --sv-surface: #1a1a1a;
  --sv-surface-raised: #242424;
  --sv-surface-sunken: #161616;
  --sv-surface-dim: #333333;
  --sv-inverse-surface: var(--sv-gray-xdark);
  --sv-inverse-ink: var(--sv-white);
  --sv-inverse-ink-secondary: var(--sv-gray-light);
  --sv-ink: #ececec;
  --sv-ink-secondary: #b8b8b8;
  --sv-ink-tertiary: #8c8c8c;
  --sv-hairline: #2e2e2e;
  --sv-hairline-strong: #5c5c5c;
  --sv-hairline-max: var(--sv-white);
  --sv-emphasis-surface: var(--sv-white);
  --sv-emphasis-ink: var(--sv-black);
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: #d6a080;
  /* Fills: light ink over the dark ground, a step stronger than in light so
   * each one still reads (see :root). */
  --sv-fill-1: rgb(255 255 255 / 0.05);
  --sv-fill-2: rgb(255 255 255 / 0.07);
  --sv-fill-3: rgb(255 255 255 / 0.10);
  --sv-fill-4: rgb(255 255 255 / 0.14);
  --sv-fill-5: rgb(255 255 255 / 0.19);
  /* Dark chrome lifts with light, not with more white: the tints are thin
   * highlights over the surface underneath, the sunken well is a shadow.
   * Restated rather than derived: a custom property resolves where it is
   * declared, so the light values above would freeze into dark chrome. */
  --sv-glass-tint: rgb(255 255 255 / 0.07);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.13);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.30);
  --sv-glass-rim: rgb(255 255 255 / 0.16);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.42);
  --ws-sidebar: #141414;
  --ws-hover: #262626;
  --ws-selected: #2e2e2e;
  --ws-working: #4bd18a;
  --ws-working-ink: #4bd18a;
}

:root { color-scheme: light; }
body { font-family: var(--sv-font-sans); }
button, input, textarea, select { font-family: inherit; border-radius: var(--sv-radius); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--sv-brand-ink);
  font-family: var(--sv-font-sans);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The official S logomark (foundations.md §2): the two production paths in
 * currentColor, so the mark inherits black or white from its surface instead of
 * swapping image files. Size height-only — the artwork's ratio is 828.3/933.4,
 * and any squared box shears it. The wrapper viewBox must be origin-based
 * because <use> of the offset <symbol> already applies the translate. */
.wordmark-symbol {
  display: block;
  height: 1.6em;
  width: auto;
  aspect-ratio: 828.3 / 933.4;
  flex: none;
  fill: currentColor;
  stroke: none;
}

.wordmark-text b {
  font-weight: 700;
}

.wordmark-text span {
  font-weight: 300;
}

/* Clerk injects its button/input skin after our styles and supplies its gloss
 * on ::after. Scope to the public component classes, not generated hashes, so
 * Variant selectors and hover states otherwise reinstate shadows; the scoped
 * reset intentionally takes precedence. Sign-in keeps the same flat controls as the product in every theme/state. */
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput) {
  min-height: 48px;
  border: 1px solid var(--sv-ink);
  border-radius: var(--sv-radius);
  box-shadow: none !important;
  background-image: none;
  font-family: var(--sv-font-sans);
  font-size: 1rem;
}
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput)::before,
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput)::after {
  background-image: none;
  box-shadow: none !important;
}
.cl-rootBox button.cl-formButtonPrimary {
  color: var(--sv-emphasis-ink);
  background: var(--sv-emphasis-surface);
  font-weight: 500;
}
.cl-rootBox button.cl-formButtonPrimary:hover:not(:disabled) {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}
.cl-rootBox button.cl-socialButtonsBlockButton {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}
.cl-rootBox button.cl-socialButtonsBlockButton:hover:not(:disabled) { background: var(--sv-surface-sunken); }
.cl-rootBox input.cl-formFieldInput { color: var(--sv-ink); background: var(--sv-surface); }
.cl-rootBox :is(button.cl-formButtonPrimary, button.cl-socialButtonsBlockButton, input.cl-formFieldInput):focus-visible {
  outline: 2px solid var(--sv-green);
  outline-offset: 2px;
}