/* §19 v3.0 design tokens — sivar-ui
 * Mirror of CONVENTIONS.md §19 v3.0 in github.com/egarim/sivar-architecture
 * (editorial is the single language; sticker retired). This file is the
 * canonical reference copy the spec points at: token names + space-separated
 * RGB-triple values are the locked contract. Every consumer also declares
 * these in its own web/src/index.css (per §23 "duplicate, don't import",
 * byte-equivalent). Keep in sync.
 */

:root {
  /* Accent palette — theme-constant (same hex in light and dark) */
  --sivar-red: 200 48 47;        /* #C8302F */
  --sivar-yellow: 244 194 27;    /* #F4C21B */
  --sivar-green: 43 166 74;      /* #2BA64A */
  --sivar-blue: 36 112 196;      /* #2470C4 */
  --sivar-forest: 45 107 71;     /* #2D6B47  editorial "live" dot */
  --sivar-mustard: 200 154 46;   /* #C89A2E  editorial "new" dot */
  --sivar-clay: 168 85 60;       /* #A8553C  editorial caution dot */

  /* Light-mode surfaces — cool/neutral (no warm tints) */
  --sivar-paper: 255 255 255;    /* #FFFFFF */
  --sivar-surface: 248 249 250;  /* #F8F9FA */
  --sivar-ink: 17 17 17;         /* #111111 */
  --sivar-ink-soft: 107 114 128; /* #6B7280 */
  --sivar-line: 229 231 235;     /* #E5E7EB */

  /* Shape tokens */
  --r-btn: 8px;
  --r-card: 14px;
  --r-pill: 9999px;
  --sivar-font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Motion tokens (UI.md brand-language v2). Strong custom curves — the
   * built-in CSS easings are too weak for intentional-feeling motion.
   * Entries/exits use --sivar-ease-out; on-screen movement (sliding pills,
   * tab indicators) uses --sivar-ease-in-out. Press feedback convention:
   * transform: scale(.97) on :active over --sivar-press-ms. */
  --sivar-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sivar-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sivar-press-ms: 160ms;

  /* ── Single fleet UI accent (theme) ──────────────────────────────────
   * The one accent every Sivar app shares. User-settable via the theme
   * selector (useAppearance / <AppearanceSetting>), which overrides this at
   * runtime with the chosen accent and swaps to its dark-mode variant under
   * `.dark`. Consume as rgb(var(--sivar-accent) / <alpha>). Identity per app
   * comes from photography + app icons, not from this accent (see THEME.md).
   * Fleet default: "Morado Sivar" #820AD1 (THEME.md §1/§7). This static value is
   * the pre-JS fallback; useAppearance overrides it at runtime with the saved/
   * chosen accent (and its dark variant under .dark). */
  --sivar-accent: 130 10 209;
  --sivar-accent-up: var(--sivar-accent);
}

/* Dark mode */
.dark {
  --sivar-paper: 20 18 15;       /* #14120F  warm charcoal */
  --sivar-surface: 28 25 22;     /* #1C1916 */
  --sivar-ink: 250 248 244;      /* #FAF8F4 */
  --sivar-ink-soft: 154 147 138; /* #9A938A */
  --sivar-line: 42 38 34;        /* #2A2622 */
  /* Accent in dark mode: the theme hook injects the chosen accent's lightened
   * dark variant here at runtime; static default is Morado's dark variant
   * #9836D9 (THEME.md §5). */
  --sivar-accent: 152 54 217;
  --sivar-accent-up: 168 85 224;
}