/* ============================================================
   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-400: #94a3b8;
  --gf-color-neutral-300: #cbd5e1;
  --gf-color-neutral-200: #e2e8f0;
  --gf-color-neutral-100: #f1f5f9;
  --gf-color-neutral-50:  #f8fafc;

  /* Semantic palette — info / success / warning / danger.
     Each variant offers bg (surface), border, icon (foreground accent) and text. */
  --gf-color-info-bg:      #eff6ff;
  --gf-color-info-border:  #bfdbfe;
  --gf-color-info-icon:    #2563eb;
  --gf-color-info-text:    #1e40af;

  --gf-color-success-bg:     #f0fdf4;
  --gf-color-success-border: #bbf7d0;
  --gf-color-success-icon:   #16a34a;
  --gf-color-success-text:   #166534;

  --gf-color-warning-bg:     #fffbeb;
  --gf-color-warning-border: #fde68a;
  --gf-color-warning-icon:   #d97706;
  --gf-color-warning-text:   #92400e;

  --gf-color-danger-bg:     #fef2f2;
  --gf-color-danger-border: #fecaca;
  --gf-color-danger-icon:   #dc2626;
  --gf-color-danger-text:   #991b1b;

  --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);
}