/* ============================================================
   Design Tokens — CSS Custom Properties
   Brand colours, button tokens, form-field tokens.
   MUST be loaded first so every other file can reference vars.
   ============================================================ */

:root {
  /* Brand color system */
  --gf-color-primary: #14651e; /* base brand green */
  --gf-color-primary-rgb: 20, 101, 30;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-light: #57a660;
  --gf-color-primary-light-rgb: 87, 166, 96;
  --gf-color-primary-medium: #2e8439;
  --gf-color-primary-medium-rgb: 46, 132, 57;
  --gf-color-primary-dark: #03460b;
  --gf-color-primary-darker: #002905;
  --gf-color-primary-hover: var(--gf-color-primary-medium);
  --gf-color-primary-active: var(--gf-color-primary-dark);
  --gf-color-primary-soft: rgba(var(--gf-color-primary-light-rgb), 0.16);
  --gf-color-border-primary: var(--gf-color-primary);
  --gf-color-focus-ring: rgba(var(--gf-color-primary-light-rgb), 0.35);
  --gf-color-neutral-900: #0f172a;
  --gf-color-neutral-700: #334155;
  --gf-color-neutral-500: #64748b;
  --gf-color-neutral-300: #cbd5e1;
  --gf-color-neutral-200: #e2e8f0;

  --gf-button-font-size: 15px;
  --gf-button-font-weight: 600;
  --gf-button-line-height: 1.6;
  --gf-button-letter-spacing: 0.02em;
  --gf-button-radius: 0.9rem;
  --gf-button-padding-y: 0.65rem;
  --gf-button-padding-x: 1.6rem;
  --gf-button-gap: 0.5rem;

  --gf-field-font-size: 15px;
  --gf-field-font-weight: 500;
  --gf-field-line-height: 1.5;
  --gf-field-padding-y: 0.6rem;
  --gf-field-padding-x: 1rem;
  --gf-field-min-height: 2.75rem;
  --gf-field-border: rgba(15, 23, 42, 0.14);
  --gf-field-border-hover: rgba(15, 23, 42, 0.35);
  --gf-field-bg: #ffffff;
  --gf-field-bg-muted: #f1f5f9;
  --gf-field-placeholder: rgba(15, 23, 42, 0.45);
}