:root {
/* ======================================================
   PRIMARY BUTTON
   ====================================================== */

   --btn-primary-bg: var(--cta-primary-bg);
   --btn-primary-text: var(--cta-primary-text);
   --btn-primary-border: var(--cta-primary-border);

   --btn-primary-hover-bg: color-mix(in srgb, var(--cta-primary-bg) 75%, white);
   --btn-primary-hover-text: var(--cta-primary-hover-text);

   --btn-primary-focus-ring: color-mix(in srgb, var(--cta-primary-bg) 40%, white);

   --btn-primary-disabled-bg: hsl(208,10%,80%);
   --btn-primary-disabled-text: hsl(208,10%,55%);

/* ======================================================
   SECONDARY BUTTON
   ====================================================== */

   --btn-secondary-bg: var(--cta-secondary-bg);
   --btn-secondary-text: var(--cta-secondary-text);
   --btn-secondary-border: var(--cta-secondary-border);

   --btn-secondary-hover-bg: color-mix(in srgb, var(--cta-secondary-bg) 75%, white);
   --btn-secondary-hover-text: var(--cta-secondary-hover-text);

/* ======================================================
   GHOST BUTTON
   ====================================================== */

   --btn-ghost-bg: transparent;
   --btn-ghost-text: var(--text-primary);

   --btn-ghost-hover-bg: var(--bg-section-soft);
}