/*
 * TEMPORARY design-system stylesheet.
 *
 * The real styles.css lives in the source monorepo (ui_kits design system).
 * This file only reconstructs the CSS custom properties (and a couple of
 * helpers) that index.html references, so the standalone site builds and
 * renders with a sensible sage/cream palette. Replace with the real
 * design-system styles.css when it is available.
 */

:root {
  /* Fonts — system stacks until the real DS web fonts are vendored in */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Surfaces */
  --color-bg: #f7f5ef;
  --color-surface: #ffffff;

  /* Ink (text) */
  --color-ink: #1f2421;
  --color-ink-2: #3d4642;
  --color-ink-3: #6b756f;

  /* Sage brand */
  --color-sage: #5c7f6b;
  --color-sage-78: rgba(92, 127, 107, 0.78);
  --color-sage-soft: #e6ede8;
  --color-sage-text: #4a6a57;

  /* Lines */
  --color-border: #e2ddd2;
  --color-divider: #ece8df;

  /* Info / warn accents */
  --color-info: #2f6f8f;
  --color-info-soft: #e4eef3;
  --color-warn-text: #8a5a1c;
  --color-warn-soft: #f6ecd9;

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(31, 36, 33, 0.08), 0 1px 2px rgba(31, 36, 33, 0.04);
  --shadow-raised: 0 8px 24px rgba(31, 36, 33, 0.12);
}