/**
 * CYV Premium Theme - Default
 * Professional theme using brand blue (#384971)
 */

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

    /* Surface colors */
    --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-blue-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-blue-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;

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

    /* Standard spacing */
    --wa-spacing-small: 1rem;
    --wa-spacing-medium: 1.5rem;
    --wa-spacing-large: 2rem;

    /* Shadows */
    --wa-shadow-x-small: 0 1px 2px rgba(56, 73, 113, 0.1);
    --wa-shadow-small: 0 2px 4px rgba(56, 73, 113, 0.1);
    --wa-shadow-medium: 0 4px 8px rgba(56, 73, 113, 0.1);
  }

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

  .wa-theme-cyv-premium wa-card::part(base) {
    border-radius: 12px;
    background: white;
    border-color: var(--wa-color-blue-60);
  }

  .wa-theme-cyv-premium h1,
  .wa-theme-cyv-premium h2,
  .wa-theme-cyv-premium h3 {
    font-family: var(--wa-font-family-serif);
    font-weight: 400;
    color: var(--wa-color-blue-30);
  }

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

    /* Dark surfaces */
    --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-blue-50);

    /* Dark text */
    --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-blue-60);

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

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

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

  /* Responsive font scaling */
  /* Mobile - smaller fonts */
  @media (max-width: 576px) {
    .wa-theme-cyv-premium {
      --wa-font-size-scale: 0.875;
    }
  }

  /* Tablet - slightly smaller */
  @media (min-width: 577px) and (max-width: 991px) {
    .wa-theme-cyv-premium {
      --wa-font-size-scale: 0.95;
    }
  }

  /* Desktop - standard */
  @media (min-width: 992px) and (max-width: 1399px) {
    .wa-theme-cyv-premium {
      --wa-font-size-scale: 1;
    }
  }

  /* Large desktop - bigger fonts */
  @media (min-width: 1400px) {
    .wa-theme-cyv-premium {
      --wa-font-size-scale: 1.1;
    }
  }
}