:root, *{
  --fp-color-black:#000000;
  --fp-color-white:#ffffff;
  --fp-color-accent:#FA5935;
  --fp-color-brown:#322A0F;
  --fp-color-border:#EBEBEB;
  --fp-color-success:#5D9E53;
  --fp-color-danger:#F31700;
  --fp-color-warning:#F7CF46;
  --fp-color-shadow-3:#00000008;
  --fp-color-shadow-5:#0000000D;
  --fp-color-shadow-12:#0000001F;
  --fp-color-shadow-14:#00000024;
  --fp-color-shadow-20:#00000033;
  --fp-color-gray-1:#E6E5E5;
  --fp-color-gray-2:#C4C4C4;
  --fp-color-gray-3:#B9B9B9;

  --kendo-color-app-surface:var(--fp-color-white);
  --kendo-color-on-app-surface:var(--fp-color-brown);

  --kendo-color-surface:var(--fp-color-white);
  --kendo-color-surface-alt:var(--fp-color-gray-1);
  --kendo-color-subtle:var(--fp-color-gray-1);

  --kendo-color-border:var(--fp-color-border);
  --kendo-color-border-alt:var(--fp-color-gray-1);

  --kendo-color-base:var(--fp-color-white);
  --kendo-color-base-hover:var(--fp-color-gray-1);
  --kendo-color-base-active:var(--fp-color-gray-2);
  --kendo-color-base-emphasis:var(--fp-color-gray-3);
  --kendo-color-on-base:var(--fp-color-brown);
  --kendo-color-base-on-surface:var(--fp-color-brown);
  --kendo-color-base-subtle:var(--fp-color-gray-1);
  --kendo-color-base-subtle-hover:var(--fp-color-gray-1);
  --kendo-color-base-subtle-active:var(--fp-color-gray-2);
  --kendo-color-base-on-subtle:var(--fp-color-brown);

  --kendo-color-primary:var(--fp-color-accent);
  --kendo-color-primary-hover:#E24F31;
  --kendo-color-primary-active:#C9442B;
  --kendo-color-primary-emphasis:#FFF1EC;
  --kendo-color-primary-subtle:var(--kendo-color-primary-emphasis);
  --kendo-color-primary-subtle-hover:var(--kendo-color-primary-emphasis);
  --kendo-color-primary-subtle-active:var(--kendo-color-primary-emphasis);
  --kendo-color-primary-on-subtle:var(--fp-color-brown);
  --kendo-color-on-primary:var(--fp-color-white);
  --kendo-color-primary-on-surface:var(--fp-color-accent);

  --kendo-color-secondary:var(--fp-color-gray-1);
  --kendo-color-secondary-hover:var(--fp-color-gray-2);
  --kendo-color-secondary-active:var(--fp-color-gray-3);
  --kendo-color-secondary-emphasis:var(--fp-color-gray-2);
  --kendo-color-on-secondary:var(--fp-color-brown);
  --kendo-color-secondary-on-surface:var(--fp-color-brown);
  --kendo-color-secondary-subtle:var(--fp-color-white);
  --kendo-color-secondary-subtle-hover:var(--fp-color-gray-1);
  --kendo-color-secondary-subtle-active:var(--fp-color-gray-2);
  --kendo-color-secondary-on-subtle:var(--fp-color-brown);

  --kendo-color-success:var(--fp-color-success);
  --kendo-color-on-success:var(--fp-color-white);
  --kendo-color-success-emphasis:#EAF4E8;

  --kendo-color-error:var(--fp-color-danger);
  --kendo-color-on-error:var(--fp-color-white);
  --kendo-color-error-emphasis:#FDE6E3;

  --kendo-color-warning:var(--fp-color-warning);
  --kendo-color-on-warning:var(--fp-color-brown);
  --kendo-color-warning-emphasis:#FFF6D6;

  --red:var(--fp-color-danger);
  --red-bg:#FDE6E3;
  --yellow:var(--fp-color-warning);
  --yellow-bg:#FFF6D6;
  --green:var(--fp-color-success);
  --green-bg:#EAF4E8;
}