/*
 * wardn design tokens — executable source of truth for color, type, radius,
 * shadow and motion. Consumed by both the Angular app (frontend/src/styles.css)
 * and the MkDocs site (docs/stylesheets/extra.css, via a symlink at
 * docs/stylesheets/tokens.css). Rationale and contrast ratios live in
 * design/tokens/colors.json — keep the two in sync by hand when values change.
 */

:root {
  /* ---- brand (verbatim from the logo, decorative use only) ---- */
  --wardn-brand-plum: #41184f;
  --wardn-brand-indigo: #462fc7;
  --wardn-brand-violet: #7b40bb;
  --wardn-brand-orchid: #b453ac;
  --wardn-brand-rose: #fe5a81;
  --wardn-brand-coral: #fe917a;

  /* ---- accent: the one interactive color per view ---- */
  --wardn-accent: #7b40bb;
  --wardn-accent-hover: #6a2ca7;
  --wardn-accent-pressed: #5c1997;
  --wardn-accent-wash: #f3edfd;
  /* Used in place of --wardn-accent for links/interactive text on the dark
     (Plum) scheme only — violet loses contrast against Plum, orchid holds it. */
  --wardn-accent-on-dark: #b453ac;

  /* ---- neutral ramp: light ---- */
  --wardn-canvas-light: #fdfcff;
  --wardn-surface-light: #ffffff;
  --wardn-sunken-light: #f5f3f8;
  --wardn-border-light: #e3e0e9;
  --wardn-muted-light: #787184;
  --wardn-ink-light: #16111e;

  /* ---- neutral ramp: dark (Plum-based) ----
     Surface sits lighter than canvas, sunken darker — same lift logic as the
     light ramp, just inverted around a dark base. */
  --wardn-canvas-dark: #41184f;
  --wardn-surface-dark: #4e1f5e;
  --wardn-sunken-dark: #361442;
  --wardn-border-dark: rgba(255, 255, 255, 0.12);
  --wardn-muted-dark: #c7bdd0;
  --wardn-ink-dark: #fdfcff;

  /* ---- semantic state: same in both schemes ---- */
  --wardn-state-granted: #1e7c50;
  --wardn-state-granted-wash: #ecfbf2;
  --wardn-state-denied: #bd3c42;
  --wardn-state-denied-wash: #fef4f4;
  --wardn-state-pending: #9a692a;
  --wardn-state-pending-wash: #fbf2e8;

  /* ---- type ---- */
  --wardn-font-display: 'Space Grotesk', system-ui, sans-serif;
  --wardn-font-body: 'Inter', system-ui, sans-serif;
  --wardn-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --wardn-weight-light: 300;
  --wardn-weight-regular: 400;
  --wardn-weight-medium: 500;
  --wardn-weight-semibold: 600;

  /* ---- radius: two sizes, nothing bigger — this UI stays boxy ---- */
  --wardn-radius-sm: 6px;
  --wardn-radius-md: 8px;

  /* ---- shadow: default is none — separate surfaces with a 1px border,
     not elevation. The one reserved shadow is for transient overlays
     (menus, popovers) that sit above content with no border to anchor to. */
  --wardn-shadow-none: none;
  --wardn-shadow-sm: 0 1px 2px rgba(22, 17, 30, 0.06);

  /* ---- motion ---- */
  --wardn-motion-fast: 150ms ease;
}