AI Instructions

:root {
  /* Primary Colors */
  --ab-green: #00DE8E;
  --ab-dark-blue: #00004E;
  --ab-cornflower: #000093;

  /* Secondary Colors */
  --ab-red: #ED0735;
  --ab-orange: #FF8E09;
  --ab-dark-green: #00B172;

  /* Neutral Colors */
  --ab-light-gray: #F6F6F6;
  --ab-white: #FFFFFF;
  --ab-black: #000000;

  /* Typography */
  --font-family: 'Manrope', sans-serif;

  /* Font Sizes */
  --text-h1: 120px;
  --text-h2: 60px;
  --text-h3: 40px;
  --text-h4: 32px;
  --text-ingress: 32px;
  --text-body: 22px;
  --text-small: 16px;
}

<!-- Color Classes -->
<div class="bg-ab-green">Green Background</div>
<p class="text-ab-cornflower">Cornflower Text</p>
<button class="bg-ab-dark-blue hover:bg-ab-cornflower">Button</button>

<!-- Typography Classes -->
<h1 class="text-h1-md lg:text-h1">Main Heading</h1>
<h2 class="text-h2-md lg:text-h2">Section Heading</h2>
<p class="text-body-md lg:text-body">Body text content</p>
<span class="text-small">Small text</span>

<!-- Dark Mode Support -->
<div class="bg-white dark:bg-ab-dark-blue">
  <p class="text-black dark:text-white">Responsive dark mode</p>
</div>

<!-- Google Fonts Link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">

<!-- CSS Application -->
<style>
  body {
    font-family: 'Manrope', sans-serif;
  }
</style>

import React from 'react';

export const BrandButton = ({ children, variant = 'primary' }) => {
  const baseClasses = 'px-6 py-3 rounded-lg font-bold transition-colors';

  const variants = {
    primary: 'bg-ab-green hover:bg-ab-dark-green text-white',
    secondary: 'bg-ab-cornflower hover:bg-ab-dark-blue text-white',
    outline: 'border-2 border-ab-green text-ab-green hover:bg-ab-green hover:text-white'
  };

  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
};