:root {
  color-scheme: light dark;


  --ae-text-strong: #7a7a7a;

  --ae-bg: #ebebeb;
  --ae-surface: #4d4d4d71;
  --ae-surface-soft: #d37a1a;
  --ae-text: #7a7a7a;
  --ae-muted: #7a7a7a;
  --ae-border-subtle: rgba(3, 51, 109, 0.08);

  --ae-header-bg: #ebebeb;
  --ae-header-border: none;
  --ae-header-height: 6rem;     

  --ae-accent: #00ff77;
  --ae-accent-opposite: #ff0088; /* magenta */
  
  --ae-accent-soft:  rgb(253, 137, 29);
  --ae-accent-gradient: linear-gradient(90deg, #ff4b82, #d6c41d);

  --ae-tagline-color: #d37a1a;

  --ae-radius-card: 1.1rem;

  
  --background-color: var(--ae-bg);
  --color-white: var(--ae-bg);
  --white-color: var(--ae-bg);

  --color-primary-text: var(--ae-text-strong);
  --primary-text-color: var(--ae-text-strong);
  --secondary-text-color: var(--ae-text);

  --lighter-gray-color: var(--ae-surface);
  --light-gray-color: var(--ae-muted);
  --mid-gray-color: var(--ae-text-strong);
  --dark-gray-color: #ff0000;
  --darker-gray-color: #ff26ff;
  --color-darker-gray: var(--ae-tagline-color);
  --black-color: var(--ae-bg);
  --color-secondary-text: var(--ae-bg);

  --color-border: var(--ae-border-subtle);
  --color-dark-border: var(--ae-border-subtle);

  --ghost-accent-color: var(--ae-accent);
  --font-sans: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Gelasio", "Source Serif 4", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ae-bg: #111319;
    --ae-surface: #3c42588f;
    --ae-surface-soft: #d8a36a;

    --ae-text: #7a7a7a;
    --ae-muted: #7a7a7a;
    --ae-text-strong: #7a7a7a;

    --ae-border-subtle: rgba(255, 255, 255, 0.06);

    --ae-header-bg: #111319;
    --ae-header-border: none;
    --ae-header-height: 6rem;  

    --ae-accent: #ff0088;
    --ae-accent-opposite: #00ff77; 
    --ae-accent-soft: rgb(253, 137, 29);
    --ae-accent-gradient: linear-gradient(90deg, #fa2872ec, #fd3aa2, #ffa42e);

    --ae-tagline-color: #d8a36a;

    --background-color: var(--ae-bg);
    --color-white: var(--ae-bg);
    --white-color: var(--ae-bg);

    --color-primary-text: var(--ae-text-strong);
    --primary-text-color: var(--ae-text-strong);
    --secondary-text-color: var(--ae-text);

    --lighter-gray-color: var(--ae-surface);
    --light-gray-color: var(--ae-muted);
    --mid-gray-color: var(--ae-text-strong);
    --dark-gray-color: #01ff0e;
    --darker-gray-color: #ff26ff;
    --color-border: var(--ae-border-subtle);
    --color-dark-border: var(--ae-border-subtle);
    --color-darker-gray: var(--ae-tagline-color);
    --black-color: var(--ae-bg);
    --color-secondary-text: var(--ae-bg);

    --ghost-accent-color: var(--ae-accent);
  }
}