/* Design tokens. Every colour, size and radius in the application is defined
   here and nowhere else. A value hard-coded in a template will drift; a value
   here changes everywhere at once. */

:root {
  /* --- brand ------------------------------------------------------------ */
  --c-brand:        #1e3a5f;   /* deep site-blue, the header and primary */
  --c-brand-dark:   #162d4a;
  --c-brand-light:  #2c5282;
  --c-accent:       #d97706;   /* hi-vis amber, for the Add button */
  --c-accent-dark:  #b45309;

  /* --- surfaces --------------------------------------------------------- */
  --c-bg:           #f1f4f8;
  --c-surface:      #ffffff;
  --c-surface-2:    #f8fafc;
  --c-surface-3:    #eef2f7;

  /* --- ink -------------------------------------------------------------- */
  --c-ink:          #111827;
  --c-ink-2:        #374151;
  --c-ink-3:        #6b7280;
  --c-ink-4:        #9ca3af;
  --c-on-brand:     #ffffff;

  /* --- lines ------------------------------------------------------------ */
  --c-line:         #d7dee8;
  --c-line-2:       #e8edf3;
  --c-focus:        #2563eb;

  /* --- state ------------------------------------------------------------ */
  --c-success:      #15803d;
  --c-success-bg:   #dcfce7;
  --c-warning:      #b45309;
  --c-warning-bg:   #fef3c7;
  --c-danger:       #b91c1c;
  --c-danger-bg:    #fee2e2;
  --c-info:         #1d4ed8;
  --c-info-bg:      #dbeafe;

  /* --- type ------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --lh:      1.5;

  /* --- space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* --- shape ------------------------------------------------------------ */
  --r-sm: 5px;
  --r:    8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-2: 0 2px 8px rgba(17, 24, 39, 0.08);
  --shadow-3: 0 8px 24px rgba(17, 24, 39, 0.14);

  /* --- layout ----------------------------------------------------------- */
  --sidebar-w:  232px;
  --header-h:   56px;
  --mobile-nav-h: 60px;
  --page-max:   1320px;
  /* Tap targets. 44px is the smallest a gloved hand on a site reliably hits. */
  --tap: 44px;
}