@layer base {
  body {
    --color-primary: var(--color3);
    --color-brand: var(--color3);
    --color-muted: var(--color9);
    --color-tertiary: var(--color2);
    --color-surface: var(--color5);
    --color-accent: var(--color4);
    --color-secondary: var(--color6);
    --color-content: var(--color1);
    --color-background: var(--color9);
    --color-foreground: var(--color1);
    --color-border: var(--color11);
    --color-input: var(--color9);
    --color-ring: var(--color3);
    --color-card: var(--color5);
    --color-card-foreground: var(--color1);
    --color-popover: var(--color5);
    --color-popover-foreground: var(--color1);
    --color-muted-foreground: var(--color2);
  }

  body {
    color: var(--p-color);
    font-family: var(--p-font);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    background-color: var(--color-background);
  }

  h1 {
    color: var(--h1-color);
    font-family: var(--h1-font);
    font-size: var(--h1-size);
    letter-spacing: -.02em;
    text-transform: uppercase
  }

  h2 {
    color: var(--h2-color);
    font-family: var(--h2-font);
    font-size: var(--h2-size);
    font-weight: 600;
    letter-spacing: -.01em
  }

  h3 {
    color: var(--h3-color);
    font-family: var(--h3-font);
    font-size: var(--h3-size);
    font-weight: 600
  }

  p {
    color: var(--p-color);
    font-family: var(--p-font);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
  }

  blockquote {
    color: var(--p-color);
    font-family: "Miller Banner", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-style: italic;
    line-height: 1.8;
    margin: var(--spacing-lg) 0;
  }
}

@font-face {
  font-family: 'Miller Banner';
  src: url('./fonts/miller-banner/Miller_Banner_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Miller Banner';
  src: url('./fonts/miller-banner/Miller_Banner_Semi_Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Miller Banner';
  src: url('./fonts/miller-banner/Miller_Banner_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('./fonts/Avenir/Avenir Regular/Avenir Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('./fonts/Avenir/Avenir Book/Avenir Book.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('./fonts/Avenir/Avenir Light/Avenir Light.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('./fonts/Avenir/Avenir Heavy/Avenir Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/josefin-sans/JosefinSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/josefin-sans/JosefinSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/josefin-sans/JosefinSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Filipa Silva Brand Theme */
/* Sets all CSS custom property values for the Filipa Silva brand theme */

/* Root theme class - sets default variables */
body {
  /* Base colors - numbered palette, reuse as needed */
  --color1: rgba(11, 16, 38, 0.85);                    /* Dark text */
  --color2: rgba(11, 16, 38, 0.85);     /* Muted text */
  --color3: #335BE9;                    /* Primary blue */
  --color4: #EC804A;                    /* Orange */
  --color5: #ffffff;                    /* White */
  --color6: #3399E9;                    /* Light blue */
  --color7: #E15436;                    /* Red-orange */
  --color8: #eab308;                    /* Yellow */
  --color9: #F7FAFF;                    /* Light surface */
  --color10: rgba(255, 255, 255, 0.10); /* Surface alt */
  --color11: rgba(51, 91, 233, 0.20);   /* Border */
  --color12: rgba(255, 255, 255, 0.24); /* Border on alt */
  --color13: #34D399;                   /* Emerald green (selection/success accent) */
  --color13-rgb: 52, 211, 153;          /* RGB helper for rgba(var(--color13-rgb), a) */
  
  /* Typography - h1 */
  --h1-size: clamp(2rem, 4vw, 3rem);
  --h1-color: var(--color1);
  --h1-font: "Josefin Sans", ui-sans-serif, system-ui, sans-serif;
  
  /* Typography - h2 */
  --h2-size: clamp(1.4rem, 2.4vw, 2rem);
  --h2-color: var(--color1);
  --h2-font: "Miller Banner", ui-sans-serif, system-ui, sans-serif;
  
  /* Typography - h3 */
  --h3-size: 1.125rem;
  --h3-color: var(--color1);
  --h3-font: "Miller Banner", ui-sans-serif, system-ui, sans-serif;
  
  /* Typography - p/body */
  --p-size: 1.125rem;
  --p-color: var(--color2);
  --p-font: 'Avenir', "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --p-line-height: 1.6;
  
  /* Spacing - can be referenced in Tailwind config */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 3.5rem;    /* 56px */
  --spacing-4xl: 4rem;      /* 64px */
  
  /* Layout */
  --container-max-width: 1240px;
  --radius: 18px;
  --shadow: 0 20px 50px rgba(17, 24, 39, 0.15);
  --shadow-alt: 0 20px 60px rgba(0, 0, 0, 0.22);
  
  /* Component variables - follow {element/context}-{property} pattern */
  --card-bg: var(--color5);
  --card-color: var(--p-color);
  --card-border: var(--color11);
  --card-radius: var(--radius);
  --card-shadow: var(--shadow);
  
  --card-alt-bg: var(--color10);
  --card-alt-color: var(--color5);
  --card-alt-border: var(--color12);
  --card-alt-shadow: var(--shadow-alt);
  
  --button-bg: var(--color4);
  --button-color: var(--color5);
  --button-border: transparent;
  --button-radius: var(--radius);
  
  --button-secondary-color: var(--color3);
  --button-secondary-hover-color: var(--color5);

  --footer-social-bg: var(--color3);
  --footer-social-color: var(--color5);
  --footer-social-hover-bg: rgba(51, 91, 233, 0.8);
}

body .hero {
  --h1-color: var(--color5);
  --h2-color: var(--color5);
}

/* Section overrides - uses same variables */
body section {
  --h1-color: var(--color2);
  --h2-color: var(--color2);
  --h3-color: var(--color2);
  --p-color: var(--color2);
  background-color: var(--color9);
}

/* Alternate section overrides - overrides same variables with different values */
body section.alternate {

  color: var(--color5);
  --h1-color: var(--color5);  /* Override --h1-color, not --h1-color-alt */
  --h2-color: var(--color5);
  --h3-color: var(--color5);
  --p-color: var(--color5);
  background-color: var(--color3);
}

body section.alternate blockquote {
  color: var(--color5);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    color: var(--card-color);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--card-shadow)
}

/* Diagonal background effect for sections with consistent angle using fixed pixel values */
.diagonal {
  clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
}

body section.alternate .card {
  background-color: transparent;
  border: 1px solid var(--color5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  color: var(--card-alt-color);
}

body section.alternate .card h2,
body section.alternate .card h3,
body section.alternate .card p {
  color: var(--card-alt-color);
}

body section.alternate.stat .card .icon {

  color: var(--card-alt-color);
  background: transparent;
  border: 1px solid var(--color5);
}

body section.program-format article, body section.program-format article p, body section.program-format article h3 {

  color: var(--color5);
}

/* Program Format Accordion Expanded State */
body .program-format-accordion-expanded {
  background-color: var(--color3);
  color: var(--color5);
}

body .program-format-accordion-icon-expanded {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color5);
}

/* Footer social icons */
body .footer-social-icon {
  background-color: var(--footer-social-bg);
  color: var(--footer-social-color);
  transition: background-color 0.2s ease;
}

body .footer-social-icon:hover {
  background-color: var(--footer-social-hover-bg);
}

body .pricing-badge {
  background: linear-gradient(to right, var(--color8), var(--color4));
  font-family: var(--p-font);
  font-size: var(--p-size);
  color: var(--color5);
}

.button {
    background-color: var(--button-bg);
    color: var(--button-color);
    border: 1px solid var(--button-border);
    border-radius: var(--button-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: opacity .2s;
    cursor: pointer;
}