/* OptiSigns design tokens — extracted from scio3 (apps/web/src/globals.css @theme,
   INSPINIA v4.8.0 Minimal palette) + apps/web/DESIGN_SYSTEM.md. Plain CSS custom
   properties — no framework. Light mode only (this site has no dark mode). */
:root {
  /* ── Font ── (scio3 body font: Inter, same fallback stack) */
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* ── Brand / semantic colors ── */
  --color-primary: #1ab394;            /* INSPINIA teal — main CTA */
  --color-primary-hover: #17a086;      /* ≈ hover:bg-primary/90 on white */
  --color-primary-foreground: #ffffff;
  --color-secondary: #e8f7f4;          /* light teal tint */
  --color-secondary-foreground: #1ab394;
  --color-destructive: #ed5565;
  --color-success: #0acf97;
  --color-warning: #f8ac59;
  --color-warning-bg: #fef3e2;
  --color-info: #23c6c8;

  /* ── Surfaces ── */
  --color-background: #ffffff;
  --color-foreground: #313a46;
  --color-card: #ffffff;
  --color-muted: #f6f7fb;              /* page background */
  --color-muted-foreground: #6c757d;
  --color-accent: #f7f7fb;
  --color-border: #edf2f9;
  --color-input: #e7e9eb;              /* input border */
  --color-input-strong: #b8bcc3;       /* darker input border (scio3 dialog cascade) */
  --color-ring: #1ab394;

  /* ── Notice tints ── (scio3 banner palette + warning/destructive tints) */
  --color-ok-bg: #e8f7f4;
  --color-ok-border: #bfeae1;
  --color-ok-text: #1e7164;
  --color-warn-bg: #fef3e2;
  --color-warn-border: #f4d7ac;
  --color-warn-text: #8a5b06;
  --color-err-bg: #fdf0f2;
  --color-err-border: #f8ccd3;
  --color-err-text: #c62f42;

  /* ── Radii ── (scio3 scale: buttons rounded-sm, inputs rounded-md, cards rounded-lg) */
  --radius-sm: 0.375rem;  /* 6px  — buttons */
  --radius-md: 0.5rem;    /* 8px  — inputs, notices */
  --radius-lg: 0.625rem;  /* 10px — cards, panels */

  /* ── Elevation ── (Level 1 "resting" only — shadow-sm, layered) */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.1);

  /* ── Spacing ── (4px base scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}