/*
 * ReadyNow design tokens — single source of truth for the admin UI brand.
 * Imported by the CakePHP layout (server-rendered pages) AND the React island
 * bundle so both render one visual language. See ADR-0007 and docs/ui_patterns.md.
 * Theme Bootstrap by mapping its variables to these tokens; do not hard-code
 * brand colors in templates or components.
 */

:root {
  /* Brand */
  --color-primary: #0F3D2E;   /* deep green */
  --color-signal: #2ECC71;    /* signal green (accent, "now") */

  /* Neutrals */
  --color-charcoal: #1F2933;  /* primary text */
  --color-slate: #4B5563;     /* secondary text */
  --color-light-gray: #E5E7EB;/* borders / dividers */
  --color-background: #F9FAFB;/* off-white app background */
  --color-card: #FFFFFF;

  /* State */
  --color-ready: #2ECC71;     /* Ready */
  --color-warning: #F59E0B;   /* Due Soon */
  --color-danger: #DC2626;    /* At Risk */
  --color-inactive: #9CA3AF;  /* Inactive */

  /* State chip backgrounds (tints) */
  --color-ready-bg: #EAF7EF;
  --color-warning-bg: #FEF3E2;
  --color-danger-bg: #FEE2E2;

  /* Typography */
  --font-family-base: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-heading: 600;
  --font-weight-strong: 700;

  /* Surface */
  --radius-card: 8px;
  --radius-control: 5px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(15 61 46 / 0.05);
  --color-backdrop: rgb(31 41 51 / 0.42);
  --border-card: 1px solid var(--color-light-gray);
}

/*
 * Bootstrap variable bridge — map Bootstrap 5 CSS variables to ReadyNow tokens so
 * baked CRUD forms, tables, buttons, and cards render on-brand with no per-page
 * overrides. (Set the matching Sass $variables at build time as well.)
 */
:root {
  --bs-body-font-family: var(--font-family-base);
  --bs-body-color: var(--color-charcoal);
  --bs-body-bg: var(--color-background);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 15, 61, 46;
  --bs-success: var(--color-ready);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-border-color: var(--color-light-gray);
  --bs-border-radius: var(--radius-control);
  --bs-card-bg: var(--color-card);
  --bs-card-border-color: var(--color-light-gray);
  --bs-card-border-radius: var(--radius-card);
}