/*
 * Valere CRM design tokens for the demo site.
 *
 * Source of truth: web/shared/theme/tokens.css (the app's Tailwind v4 @theme block, ADR-0015).
 * Its names come from the Valere CRM Design Foundations canvas; since 2026-10-07 its values
 * follow Apiko's design concept (ADR-0042): the green scheme of ADR-0044 (Tailwind's blue and zinc before), Inter, rounder cards.
 * The names below are the app's names, unchanged. When the app's file changes, change this one to match.
 *
 * Every page of this site reads its colors, fonts, radii and shadows from here.
 */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Neutrals: a gray with a faint green cast (ADR-0044) */
  --color-white: #ffffff;
  --color-gray-900: #1d2724;
  --color-gray-700: #3d4945;
  --color-gray-600: #53615b;
  --color-gray-500: #65716b;
  --color-gray-400: #9ca8a2;
  --color-gray-300: #d0d9d4;
  --color-gray-200: #e3e9e5;
  --color-gray-100: #f3f6f4;
  --color-gray-50: #fafbfa;

  /* Action green: buttons, links, selected rows and tabs. 900 only at the far end of the sign-in panel's gradient */
  --color-primary-900: #153a33;
  --color-primary-700: #1e483f;
  --color-primary-600: #25574e;
  --color-primary-300: #74c1aa;
  --color-primary-100: #eaf2ea;
  --color-focus: #3d8e7b;

  /* Status: always paired with a label or an icon shape, never hue alone */
  --color-good-text: #15803d;
  --color-good-tint: #dcfce7;
  --color-good-mark: #16a34a;
  --color-warn-text: #b45309;
  --color-warn-tint: #fef3c7;
  --color-warn-mark: #f59e0b;
  --color-crit-text: #b91c1c;
  --color-crit-tint: #fee2e2;
  --color-crit-mark: #dc2626;

  /* Function owners. MD and other roles use the Legal slate. Still the Design Foundations colors (ADR-0042) */
  --color-fn-backoffice: #5a3e99;
  --color-fn-backoffice-tint: #eee9f8;
  --color-fn-land: #0b6b6f;
  --color-fn-land-tint: #ddf0f0;
  --color-fn-partnerships: #9b2c6b;
  --color-fn-partnerships-tint: #f8e5ef;
  --color-fn-construction: #5e6b12;
  --color-fn-construction-tint: #eef1d6;
  --color-fn-legal: #3a4756;
  --color-fn-legal-tint: #eef1f5;

  /* Elevation: tables and inputs are flat; cards and popovers lift */
  --shadow-card: 0 1px 2px rgba(29, 39, 36, 0.05);
  --shadow-popover: 0 8px 24px rgba(29, 39, 36, 0.12);

  /*
   * Radii: the app sets md and lg in its tokens (8 and 12 px, from the concept); sm and full
   * are Tailwind's defaults. The spacing names follow Tailwind's keys (space-5 is p-5, 20px)
   * and list only the steps the app's code uses.
   */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Sizes the app shell and the controls are built on (Sidebar, AppLayout, Button.tsx, TextField.tsx) */
  --size-sidebar: 240px;
  --size-sidebar-rail: 64px;
  --size-topbar: 56px;
  /* 36 px since the design concept: the button, the field and the filter */
  --size-control: 36px;
}