/**
 * CYV Mellow Theme
 * Soft, calm theme with muted pink/purple accents
 */

@import url('https://fonts.bunny.net/css2?family=Josefin+Sans:wght@300;400;600;700&family=Josefin+Slab:wght@300;400;600;700&display=swap');

@layer wa-theme {
  .wa-theme-cyv-mellow,
  .wa-theme-cyv-mellow.wa-light,
  .wa-theme-cyv-mellow .wa-light {
    /* Use purple (light pink) as primary brand color */
    --wa-color-brand-95: var(--wa-color-purple-95);
    --wa-color-brand-90: var(--wa-color-purple-90);
    --wa-color-brand-80: var(--wa-color-purple-80);
    --wa-color-brand-70: var(--wa-color-purple-70);
    --wa-color-brand-60: var(--wa-color-purple-60);
    --wa-color-brand-50: var(--wa-color-purple-50);
    --wa-color-brand-40: var(--wa-color-purple-40);
    --wa-color-brand-30: var(--wa-color-purple-30);
    --wa-color-brand: var(--wa-color-purple-50);

    /* Soft surface colors */
    --wa-color-surface-raised: white;
    --wa-color-surface-default: var(--wa-color-purple-98);
    --wa-color-surface-lowered: var(--wa-color-purple-95);
    --wa-color-surface-border: var(--wa-color-purple-80);

    /* Muted text */
    --wa-color-text-normal: var(--wa-color-neutral-20);
    --wa-color-text-quiet: var(--wa-color-neutral-50);
    --wa-color-text-link: var(--wa-color-purple-40);

    /* Typography */
    --wa-font-family-sans: 'Josefin Sans', sans-serif;
    --wa-font-family-serif: 'Josefin Slab', serif;
    font-family: var(--wa-font-family-sans);
    font-weight: 300;

    /* Gentle corners */
    --wa-border-radius-small: 8px;
    --wa-border-radius-medium: 12px;
    --wa-border-radius-large: 16px;

    /* Soft shadows */
    --wa-shadow-x-small: 0 1px 3px rgba(0, 0, 0, 0.08);
    --wa-shadow-small: 0 2px 6px rgba(0, 0, 0, 0.08);
    --wa-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* Component-specific styling */
  .wa-theme-cyv-mellow wa-button::part(base) {
    border-radius: 12px;
    font-weight: 400;
  }

  .wa-theme-cyv-mellow wa-card::part(base) {
    border-radius: 12px;
    background: white;
    border-color: var(--wa-color-purple-70);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .wa-theme-cyv-mellow h1,
  .wa-theme-cyv-mellow h2,
  .wa-theme-cyv-mellow h3 {
    font-family: var(--wa-font-family-serif);
    font-weight: 300;
    color: var(--wa-color-purple-30);
  }

  /* Dark mode */
  .wa-theme-cyv-mellow.wa-dark,
  .wa-theme-cyv-mellow .wa-dark,
  .wa-dark .wa-theme-cyv-mellow {
    color-scheme: dark;

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: var(--wa-color-neutral-00);
    --wa-color-surface-border: var(--wa-color-purple-60);

    --wa-color-text-normal: var(--wa-color-neutral-90);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-purple-60);

    background-color: var(--wa-color-neutral-05);
    color: var(--wa-color-neutral-90);
  }

  .wa-dark .wa-theme-cyv-mellow wa-card::part(base) {
    background: var(--wa-color-neutral-10);
    border-color: var(--wa-color-purple-60);
  }

  .wa-dark .wa-theme-cyv-mellow h1,
  .wa-dark .wa-theme-cyv-mellow h2,
  .wa-dark .wa-theme-cyv-mellow h3 {
    color: var(--wa-color-purple-70);
  }

  /* Responsive font scaling - slightly smaller for calm feel */
  @media (max-width: 576px) {
    .wa-theme-cyv-mellow {
      --wa-font-size-scale: 0.85;
    }
  }

  @media (min-width: 577px) and (max-width: 991px) {
    .wa-theme-cyv-mellow {
      --wa-font-size-scale: 0.9;
    }
  }

  @media (min-width: 992px) and (max-width: 1399px) {
    .wa-theme-cyv-mellow {
      --wa-font-size-scale: 0.95;
    }
  }

  @media (min-width: 1400px) {
    .wa-theme-cyv-mellow {
      --wa-font-size-scale: 1.05;
    }
  }
}