/* ────────────────────────────────────────────────────────────────────────────
 * tokens.css: design tokens as CSS custom properties.
 *
 * Values come from brand_assets/DESIGN-SYSTEM.md §2. The white steps are the
 * opacities OneSpot actually uses over the navy → ocean → teal gradient; new
 * CSS should pick from these rather than inlining an rgba(). Shared with the
 * dashboard theme kit later, so pages and dashboards stay on one palette.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Ntiva palette */
  --os-navy: #0f172a;
  --os-ocean: #0c4a6e;
  --os-teal: #0e7490;
  --os-orange: #f97316;

  /* Semantic */
  --os-error: #f87171;        /* form errors, failed-load text */
  --os-danger: #d6341f;       /* destructive button fill (Delete, Purge): white text 4.81:1, 3.72:1 on navy */

  /* White over the gradient, by opacity */
  --os-white: #ffffff;
  --os-white-03: rgba(255, 255, 255, 0.03);
  --os-white-04: rgba(255, 255, 255, 0.04);
  --os-white-05: rgba(255, 255, 255, 0.05);  /* frosted-glass surface */
  --os-white-08: rgba(255, 255, 255, 0.08);
  --os-white-10: rgba(255, 255, 255, 0.10);  /* card border, category pill */
  --os-white-20: rgba(255, 255, 255, 0.20);
  --os-white-30: rgba(255, 255, 255, 0.30);
  --os-white-40: rgba(255, 255, 255, 0.40);
  --os-white-50: rgba(255, 255, 255, 0.50);
  --os-white-55: rgba(255, 255, 255, 0.55);
  --os-white-60: rgba(255, 255, 255, 0.60);
  --os-white-70: rgba(255, 255, 255, 0.70);  /* secondary text */

  /* Radii */
  --os-radius-md: 0.375rem;
  --os-radius-lg: 0.5rem;
  --os-radius-xl: 0.75rem;

  /* Spacing steps used by component internals */
  --os-space-1: 0.25rem;
  --os-space-2: 0.5rem;
  --os-space-3: 0.75rem;
  --os-space-4: 1rem;
  --os-space-5: 1.25rem;
}