/**
 * CYV Playful Theme
 * Fun, vibrant theme with cyan accents and rounded corners
 */

@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-playful,
  .wa-theme-cyv-playful.wa-light,
  .wa-theme-cyv-playful .wa-light {
    /* Use cyan as primary brand color */
    --wa-color-brand-95: var(--wa-color-cyan-95);
    --wa-color-brand-90: var(--wa-color-cyan-90);
    --wa-color-brand-80: var(--wa-color-cyan-80);
    --wa-color-brand-70: var(--wa-color-cyan-70);
    --wa-color-brand-60: var(--wa-color-cyan-60);
    --wa-color-brand-50: var(--wa-color-cyan-50);
    --wa-color-brand-40: var(--wa-color-cyan-40);
    --wa-color-brand-30: var(--wa-color-cyan-30);
    --wa-color-brand-20: var(--wa-color-cyan-20);
    --wa-color-brand: var(--wa-color-cyan-50);

    /* Surface colors */
    --wa-color-surface-raised: white;
    --wa-color-surface-default: var(--wa-color-cyan-95);
    --wa-color-surface-lowered: var(--wa-color-cyan-90);
    --wa-color-surface-border: var(--wa-color-cyan-70);

    /* Text colors */
    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-cyan-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: 400;

    /* Playful rounded corners */
    --wa-border-radius-small: 12px;
    --wa-border-radius-medium: 16px;
    --wa-border-radius-large: 24px;

    /* Generous spacing */
    --wa-spacing-small: 1.25rem;
    --wa-spacing-medium: 2rem;
    --wa-spacing-large: 2.5rem;
  }

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

  .wa-theme-cyv-playful wa-card::part(base) {
    border-radius: 16px;
    background: white;
    border-color: var(--wa-color-cyan-60);
  }

  .wa-theme-cyv-playful h1,
  .wa-theme-cyv-playful h2,
  .wa-theme-cyv-playful h3 {
    font-family: var(--wa-font-family-serif);
    color: var(--wa-color-cyan-30);
  }

  /* Dark mode */
  .wa-theme-cyv-playful.wa-dark,
  .wa-theme-cyv-playful .wa-dark,
  .wa-dark .wa-theme-cyv-playful {
    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-cyan-60);

    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-cyan-60);

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

  .wa-dark .wa-theme-cyv-playful wa-card::part(base) {
    background: var(--wa-color-neutral-10);
    border-color: var(--wa-color-cyan-50);
  }

  .wa-dark .wa-theme-cyv-playful h1,
  .wa-dark .wa-theme-cyv-playful h2,
  .wa-dark .wa-theme-cyv-playful h3 {
    color: var(--wa-color-cyan-60);
  }

  /* Responsive font scaling - slightly bigger for playful feel */
  @media (max-width: 576px) {
    .wa-theme-cyv-playful {
      --wa-font-size-scale: 0.9;
    }
  }

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

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

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