/**
 * CYV Active Theme
 * Bold, energetic theme with orange accents and strong shadows
 */

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

    /* High contrast surfaces */
    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-95);
    --wa-color-surface-border: var(--wa-color-orange-60);

    /* High contrast text */
    --wa-color-text-normal: var(--wa-color-neutral-05);
    --wa-color-text-quiet: var(--wa-color-neutral-30);
    --wa-color-text-link: var(--wa-color-orange-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: 600;

    /* Sharp corners */
    --wa-border-radius-small: 4px;
    --wa-border-radius-medium: 6px;
    --wa-border-radius-large: 8px;

    /* Strong shadows */
    --wa-shadow-x-small: 0 2px 4px rgba(0, 0, 0, 0.15);
    --wa-shadow-small: 0 4px 8px rgba(0, 0, 0, 0.15);
    --wa-shadow-medium: 0 8px 16px rgba(0, 0, 0, 0.15);
    --wa-shadow-large: 0 12px 24px rgba(0, 0, 0, 0.2);
  }

  /* Component-specific styling */
  .wa-theme-cyv-active wa-button::part(base) {
    border-radius: 6px;
    font-weight: 700;
    border-width: 2px;
  }

  .wa-theme-cyv-active wa-card::part(base) {
    border-radius: 6px;
    background: white;
    border-color: var(--wa-color-orange-50);
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(237, 119, 73, 0.15);
  }

  .wa-theme-cyv-active h1,
  .wa-theme-cyv-active h2,
  .wa-theme-cyv-active h3 {
    font-family: var(--wa-font-family-serif);
    font-weight: 700;
    color: var(--wa-color-orange-30);
  }

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

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

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

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

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

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

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

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