/* ==========================================================================
   AllieWay Color Palette
   Generated by generate-marketing-site skill
   Primary: Blue (#2196F3) - matches app default accent
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Raw Color Palettes
     -------------------------------------------------------------------------- */

  /* Primary Color Family: Blue */
  --color-primary-100: #e3f2fd;
  --color-primary-200: #bbdefb;
  --color-primary-300: #90caf9;
  --color-primary-400: #64b5f6;
  --color-primary-500: #2196f3;
  --color-primary-600: #1e88e5;
  --color-primary-700: #1976d2;
  --color-primary-800: #1565c0;
  --color-primary-900: #0d47a1;

  /* Secondary Color Family: Cyan (Analogous) */
  --color-secondary-100: #e0f7fa;
  --color-secondary-200: #b2ebf2;
  --color-secondary-300: #80deea;
  --color-secondary-400: #4dd0e1;
  --color-secondary-500: #00bcd4;
  --color-secondary-600: #00acc1;
  --color-secondary-700: #0097a7;
  --color-secondary-800: #00838f;
  --color-secondary-900: #006064;

  /* Tertiary Color Family: Orange (Complementary) */
  --color-tertiary-100: #fff3e0;
  --color-tertiary-200: #ffe0b2;
  --color-tertiary-300: #ffcc80;
  --color-tertiary-400: #ffb74d;
  --color-tertiary-500: #ff9800;
  --color-tertiary-600: #fb8c00;
  --color-tertiary-700: #f57c00;
  --color-tertiary-800: #ef6c00;
  --color-tertiary-900: #e65100;

  /* Accent Color Family: Teal (Split-complementary) */
  --color-accent-100: #e0f2f1;
  --color-accent-200: #b2dfdb;
  --color-accent-300: #80cbc4;
  --color-accent-400: #4db6ac;
  --color-accent-500: #009688;
  --color-accent-600: #00897b;
  --color-accent-700: #00796b;
  --color-accent-800: #00695c;
  --color-accent-900: #004d40;

  /* Surface Color Family (Warm Neutrals) */
  --color-surface-100: #fafafa;
  --color-surface-200: #f5f5f5;
  --color-surface-300: #eeeeee;
  --color-surface-400: #e0e0e0;
  --color-surface-500: #bdbdbd;

  /* --------------------------------------------------------------------------
     Semantic Color Assignments
     -------------------------------------------------------------------------- */

  --color-primary: var(--color-primary-500);
  --color-primary-light: var(--color-primary-300);
  --color-primary-dark: var(--color-primary-700);

  --color-secondary: var(--color-secondary-500);
  --color-secondary-light: var(--color-secondary-300);
  --color-secondary-dark: var(--color-secondary-700);

  --color-tertiary: var(--color-tertiary-500);
  --color-accent: var(--color-accent-500);

  --color-surface: var(--color-surface-100);
  --color-surface-variant: var(--color-surface-200);
  --color-background: var(--color-surface-100);

  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-surface: var(--color-primary-900);
  --color-on-surface-variant: var(--color-primary-700);

  --color-outline: var(--color-surface-400);
  --color-error: #dc2626;
  --color-success: #16a34a;

  /* --------------------------------------------------------------------------
     Gradients
     -------------------------------------------------------------------------- */

  --gradient-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-400) 0%, var(--color-secondary-600) 100%);
  --gradient-tertiary: linear-gradient(135deg, var(--color-tertiary-400) 0%, var(--color-tertiary-600) 100%);

  --gradient-brand-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
  --gradient-brand-secondary: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-accent-500) 100%);
  --gradient-brand-tertiary: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-tertiary-500) 100%);

  --gradient-background-hero: linear-gradient(
    135deg,
    var(--color-primary-100) 0%,
    var(--color-secondary-100) 50%,
    var(--color-surface-100) 100%
  );
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --color-surface: var(--color-primary-900);
  --color-surface-variant: var(--color-primary-800);
  --color-background: var(--color-primary-900);
  --color-on-surface: var(--color-surface-100);
  --color-on-surface-variant: var(--color-surface-200);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --color-on-primary: #ffffff;
    --color-on-secondary: #000000;
    --color-outline: var(--color-primary-900);
  }
}