/**
  * Kelp UI - Custom Theme
  * https://kelpui.com/docs/tools/theme-builder/?color_primary=gray&color_secondary=blue&element_links=primary&element_focus=primary
*/
@layer kelp.theme {

  /* Light Theme (default) */
  :where(:root),
  .kelp-theme-light {

    /* Fills & Borders */
    --color-primary-fill-muted: var(--color-gray-95);
    --color-primary-fill-accent: var(--color-gray-90);
    --color-primary-fill-vivid: var(--color-gray-50);
    --color-primary-border-muted: var(--color-gray-90);
    --color-primary-border-accent: var(--color-gray-80);
    --color-primary-border-vivid: var(--color-gray-60);
    --color-primary-on-muted: var(--color-gray-30);
    --color-primary-on-accent: var(--color-gray-20);
    --color-primary-on-vivid: white;
    --color-primary-outline: var(--color-gray-50);
    --color-secondary-fill-muted: var(--color-blue-95);
    --color-secondary-fill-accent: var(--color-blue-90);
    --color-secondary-fill-vivid: var(--color-blue-50);
    --color-secondary-border-muted: var(--color-blue-90);
    --color-secondary-border-accent: var(--color-blue-80);
    --color-secondary-border-vivid: var(--color-blue-60);
    --color-secondary-on-muted: var(--color-blue-30);
    --color-secondary-on-accent: var(--color-blue-20);
    --color-secondary-on-vivid: white;
    --color-secondary-outline: var(--color-blue-50);

    /* Links & Focus */
    --color-text-link: var(--color-gray-50);
    --color-text-link-hover: var(--color-gray-40);
    --color-checked: var(--color-gray-50);
    --focus-ring-color: var(--color-gray-50);

  }

  /* Dark Theme */
  .kelp-theme-dark {

    /* Fills & Borders */
    --color-primary-fill-muted: var(--color-gray-20);
    --color-primary-fill-accent: var(--color-gray-30);
    --color-primary-border-muted: var(--color-gray-30);
    --color-primary-border-accent: var(--color-gray-40);
    --color-primary-on-muted: var(--color-gray-95);
    --color-primary-on-accent: var(--color-gray-95);
    --color-primary-outline: var(--color-gray-70);
    --color-secondary-fill-muted: var(--color-blue-20);
    --color-secondary-fill-accent: var(--color-blue-30);
    --color-secondary-border-muted: var(--color-blue-30);
    --color-secondary-border-accent: var(--color-blue-40);
    --color-secondary-on-muted: var(--color-blue-95);
    --color-secondary-on-accent: var(--color-blue-95);
    --color-secondary-outline: var(--color-blue-70);

    /* Links & Focus */
    --color-text-link: var(--color-gray-70);
    --color-text-link-hover: var(--color-gray-80);
    --color-checked: var(--color-gray-60);
    --focus-ring-color: var(--color-gray-60);
  }
}

body {
  padding-block: 5rem;
}