/**
 * Kelp UI - Custom Theme
 * https://kelpui.com/docs/customizing/theme-builder/?color_primary=cyan&element_links=primary&element_focus=primary&font_primary=%27Inter%2C+ui-sans-serif%2C+system-ui%2C+sans-serif%27&font_secondary=%27Outfit%2C+ui-sans-serif%2C+system-ui%2C+sans-serif%27
 */
@layer kelp.theme {
  :where(:root) {
    /* Fonts */
    --font-primary: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-secondary: 'Outfit', ui-serif, system-ui, serif;

    /* Color Palette */
    --color-cyan-base: #00f5c8;
    --color-cyan-hue: 172.95;
    /* stylelint-disable-next-line number-max-precision */
    --color-cyan-chroma: 1.95460543730964;
    --color-blue-base: #14b8ff;
    --color-blue-hue: 235.89;
    /* stylelint-disable-next-line number-max-precision */
    --color-blue-chroma: 1.1991755075191253;
  }

  /* Light Theme (default) */
  :where(:root),
  .light {
    /* Fills & Borders */
    --color-primary-fill-muted: var(--color-cyan-95);
    --color-primary-fill-accent: var(--color-cyan-90);
    --color-primary-fill-vivid: var(--color-cyan-50);
    --color-primary-border-muted: var(--color-cyan-90);
    --color-primary-border-accent: var(--color-cyan-80);
    --color-primary-border-vivid: var(--color-cyan-60);
    --color-primary-on-muted: var(--color-cyan-30);
    --color-primary-on-accent: var(--color-cyan-20);
    --color-primary-on-vivid: white;
    --color-primary-outline: var(--color-cyan-50);

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

  /* Dark Theme */
  .dark {
    /* Fills & Borders */
    --color-primary-fill-muted: var(--color-cyan-20);
    --color-primary-fill-accent: var(--color-cyan-30);
    --color-primary-border-muted: var(--color-cyan-30);
    --color-primary-border-accent: var(--color-cyan-40);
    --color-primary-on-muted: var(--color-cyan-95);
    --color-primary-on-accent: var(--color-cyan-95);
    --color-primary-outline: var(--color-cyan-70);

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

/* kelp.custom.colors.css */

/**
 * Brand-faithful Kelp color theme
 *
 * Primary:   vivid turquoise #00f5c8
 * Secondary: bright blue     #14b8ff
 *
 * Strategy:
 * - Keep vivid fills bright.
 * - Use dark text on vivid buttons.
 * - Use darker saturated colors for outline/plain text in light mode.
 * - Use brighter glow colors for outline/plain text in dark mode.
 * - Keep dark-mode muted/accent fills dark enough so plain/outline states stay readable.
 */

@layer kelp.theme {
  :where(:root),
  .light {
    /* Primary: turquoise */
    --color-primary-fill-vivid: #00f5c8;
    --color-primary-fill-accent: #9dfff0;
    --color-primary-fill-muted: #e6fffa;
    --color-primary-border-vivid: #00cdae;
    --color-primary-border-accent: #00bfa9;
    --color-primary-border-muted: #008f80;
    --color-primary-on-vivid: #002b28;
    --color-primary-on-accent: #003d38;
    --color-primary-on-muted: #005a50;
    --color-primary-outline: #007467;
    --color-brand-gradient-vivid: linear-gradient(
      135deg,
      var(--color-primary-fill-vivid),
      var(--color-secondary-fill-vivid)
    );

    /* Secondary: bright blue */
    --color-secondary-fill-vivid: #14b8ff;
    --color-secondary-fill-accent: #aee5ff;
    --color-secondary-fill-muted: #eaf8ff;
    --color-secondary-border-vivid: #009ee8;
    --color-secondary-border-accent: #0093dd;
    --color-secondary-border-muted: #007fbd;
    --color-secondary-on-vivid: #001f33;
    --color-secondary-on-accent: #00324f;
    --color-secondary-on-muted: #005070;
    --color-secondary-outline: #006fa8;
  }

  .dark {
    /* Primary: electric turquoise */
    --color-primary-fill-vivid: #00f5c8;
    --color-primary-fill-accent: #005c52;
    --color-primary-fill-muted: #00352f;
    --color-primary-border-vivid: #5dffe5;
    --color-primary-border-accent: #00d6bf;
    --color-primary-border-muted: #008f80;
    --color-primary-on-vivid: #002b28;
    --color-primary-on-accent: #e6fffa;
    --color-primary-on-muted: #bafff5;
    --color-primary-outline: #5dffe5;
    --color-brand-gradient-vivid: linear-gradient(
      135deg,
      var(--color-primary-fill-vivid),
      var(--color-secondary-fill-vivid)
    );

    /* Secondary: bright blue */
    --color-secondary-fill-vivid: #14b8ff;
    --color-secondary-fill-accent: #00527a;
    --color-secondary-fill-muted: #07364d;
    --color-secondary-border-vivid: #8ee3ff;
    --color-secondary-border-accent: #44c9ff;
    --color-secondary-border-muted: #14b8ff;
    --color-secondary-on-vivid: #001f33;
    --color-secondary-on-accent: #eaf8ff;
    --color-secondary-on-muted: #d8f3ff;
    --color-secondary-outline: #8ee3ff;
  }
}

@layer kelp.effects {
  /*
   * Fix dark-mode text color for outline/plain buttons.
   *
   * Kelp's .outline/.plain utilities set --color: var(--color-outline),
   * but if the button text still renders too dark in your setup, force the
   * rendered color here in the later public effects layer.
   */

  .dark
    :where(
      button,
      .btn,
      input:is([type='button'], [type='reset'], [type='submit'])
    ):is(.outline, .plain) {
    color: var(--color-outline);
  }

  /*
   * Outline hover gets a vivid fill, so the text needs to switch to the
   * matching on-vivid color.
   */
  .dark
    :where(
      button,
      .btn,
      input:is([type='button'], [type='reset'], [type='submit'])
    ).outline:is(:hover, :active, [data-active]) {
    color: var(--color-on-vivid);
  }

  /*
   * Plain hover stays subtle, so keep the text in the outline color.
   */
  .dark
    :where(
      button,
      .btn,
      input:is([type='button'], [type='reset'], [type='submit'])
    ).plain:is(:hover, :active, [data-active]) {
    color: var(--color-outline);
  }

  /*
   * Optional, but useful if the button contains icons/spans.
   */
  .dark
    :where(
      button,
      .btn,
      input:is([type='button'], [type='reset'], [type='submit'])
    ):is(.outline, .plain)
    > :where(*) {
    color: inherit;
  }
}