/* ═══════════════════════════════════════════════════════════════════════════
   Evident Technologies LLC — Shared Design Tokens
   packages/design-tokens/tokens.css

   Primitive layer for the entire Evident ecosystem.
   Consumed by: Eleventy (EvidTech), Founder Hub, all 6 satellite React apps.

   Semantic aliases are defined per-app in their own theme.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* stylelint-disable value-keyword-case */

:root {
  /* ── Brand Colors ──────────────────────────────────────────────────────── */
  --color-primary: #0b73d2; /* Evident core blue                      */
  --color-accent: #e07a5f; /* Warm coral accent                      */
  --color-neutral: #f6f7f9; /* Light neutral surface                  */
  --color-bg: #fff; /* Default background                     */
  --color-text: #1a1a2e; /* Primary text (near-black navy)         */
  --color-text-muted: #6b7280; /* Secondary / muted text                 */
  --color-border: #e5e7eb; /* Default border                         */
  --color-surface: #f9fafb; /* Elevated surface (cards, modals)       */

  /* ── Status Palette ────────────────────────────────────────────────────── */
  --color-success: #0a6840; /* Emerald — confirmed / paid              */
  --color-success-bg: #c8ffe0;
  --color-warning: #c88000; /* Amber — caution / pending               */
  --color-warning-bg: #fff8d0;
  --color-danger: #9b0020; /* Ruby — error / destructive              */
  --color-danger-bg: #ffe0e8;
  --color-info: #0b73d2; /* Primary blue — informational            */
  --color-info-bg: #e8f2ff;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-sans: "Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
  --font-serif: "Merriweather", "Georgia", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* ── Scale ─────────────────────────────────────────────────────────────── */
  --max-width: 1200px;
  --max-width-prose: 70ch;
  --spacing-base: 1rem;
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow: 0 2px 8px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 12%);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 16%);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 20%);

  /* ── Z-Index Scale ─────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-top: 9999;

  /* ── Animation ─────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ── Utility: responsive container ──────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ── Utility: visually hidden (screen-reader only) ──────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* ── Utility: focus-visible ring using brand color ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}