/* TOTVS primary palette + Animalia token overrides
   https://marca.totvs.com/identidade-visual/
   https://doc.animaliads.io/ */

html {
  --totvs-blue-dark: #002233;
  --totvs-blue: #00dbff;
  --totvs-white: #ffffff;

  --color-action-default: #002233;
  --color-action-hover: #00364d;
  --color-action-pressed: #00141f;
  --color-action-disabled: #b4b4c0;
  --color-action-focus: #00dbff;

  --color-brand-01-lightest: #e6faff;
  --color-brand-01-lighter: #99f0ff;
  --color-brand-01-light: #33e3ff;
  --color-brand-01-base: #00dbff;
  --color-brand-01-dark: #002233;
  --color-brand-01-darker: #00141f;
  --color-brand-01-darkest: #000c14;

  --font-family-heading: "Nunito Sans", "Segoe UI", sans-serif;
  --font-family-text: "Nunito Sans", "Segoe UI", sans-serif;
  --font-family-code: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

ani-button {
  --font-family: var(--font-family-text);
  --font-size: var(--font-size-default);
  --font-weight: var(--font-weight-bold);
  --line-height: var(--line-height-4xl);
  --border-radius: var(--border-radius-md, 4px);
  --spacing-squish: var(--spacing-squish-lg, 12px 24px);
  --border-width: var(--border-width-md, 2px);
}

ani-button[kind="primary"] {
  --background: var(--totvs-blue-dark);
  --background-hover: #00364d;
  --background-pressed: #00141f;
  --background-disabled: var(--color-action-disabled);
  --text-color: var(--totvs-white);
  --text-color-disabled: #515162;
  --outline-color-focused: var(--totvs-blue);
}

ani-button[kind="secondary"] {
  --text-color: var(--totvs-blue-dark);
  --border-color: var(--totvs-blue-dark);
  --text-color-hover: var(--totvs-blue-dark);
  --background-hover: #e6faff;
  --border-color-hover: var(--totvs-blue-dark);
  --outline-color-focused: var(--totvs-blue);
}

ani-button[kind="tertiary"] {
  --text-color: var(--totvs-blue-dark);
  --text-color-hover: var(--totvs-blue-dark);
  --background-hover: #e6faff;
  --outline-color-focused: var(--totvs-blue);
}

ani-button[kind="primary"][danger="true"] {
  --background: var(--color-feedback-negative-dark);
  --background-hover: var(--color-feedback-negative-darker);
  --text-color: var(--totvs-white);
}