You are building a UI for Functional Aesthetics.
Always use these CSS variables in every component:

/* Brand */
--color-primary: #09371D;      /* dark forest green */
--color-accent:  #CEFC32;      /* neon yellow-green */

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

/* Rules */
- Use semantic CSS variables, never raw hex values in components
- Border radius: 4px (md), 8px (lg), 12px (xl)
- All interactive states: hover, focus, active, disabled
- WCAG AA contrast compliance required

Create a [COMPONENT NAME] component:

/* Variants */
- Variants: [list variants]
- Sizes: sm | md | lg
- States: default, hover, focus, active, disabled

/* Design */
- Use CSS variables from the design system
- Border-radius: var(--radius-md)
- Font: var(--font-family), var(--font-size-base)
- Transitions: var(--transition-fast)

/* Output */
- Pure HTML + CSS (no frameworks)
- Include usage example
- Add ARIA attributes for accessibility

:root {
  /* ── Brand ─────────────────────── */
  --color-primary:          #09371D;
  --color-primary-50:       #F0F7F3;
  --color-primary-100:      #D4EBE0;
  --color-primary-200:      #A6D4BC;
  --color-primary-300:      #72BB97;
  --color-primary-400:      #3D9E6E;
  --color-primary-500:      #1A7047;
  --color-primary-600:      #09371D;
  --color-primary-700:      #072E17;
  --color-primary-800:      #052310;
  --color-primary-900:      #031709;

  --color-accent:           #CEFC32;
  --color-accent-50:        #F9FFD6;
  --color-accent-100:       #EFFE99;
  --color-accent-200:       #E4FD64;
  --color-accent-300:       #CEFC32;
  --color-accent-400:       #B0DE1A;
  --color-accent-500:       #8CB50E;
  --color-accent-600:       #678906;
  --color-accent-700:       #456003;
  --color-accent-800:       #2A3B01;
  --color-accent-900:       #141E00;

  /* ── Semantic ───────────────────── */
  --color-success:          #168500;
  --color-success-light:    #D6F5CE;
  --color-error:            #DE2417;
  --color-error-light:      #FCD1D0;
  --color-warning:          #B57300;
  --color-warning-light:    #FDEEC0;

  /* ── Backgrounds ────────────────── */
  --bg-page:                #F7F7F5;
  --bg-surface:             #FFFFFF;
  --bg-surface-secondary:   #F0F0EC;
  --bg-surface-tertiary:    #E8E8E3;
  --bg-inverse:             #111110;

  /* ── Text ───────────────────────── */
  --text-primary:           #111110;
  --text-secondary:         #555550;
  --text-tertiary:          #96968E;
  --text-disabled:          #B8B8B1;
  --text-inverse:           #FFFFFF;
  --text-link:              #09371D;

  /* ── Typography ─────────────────── */
  --font-family:      'Roboto', sans-serif;
  --font-size-xs:           0.6875rem;
  --font-size-sm:           0.75rem;
  --font-size-base:         0.875rem;
  --font-size-md:           1rem;
  --font-size-lg:           1.125rem;
  --font-size-xl:           1.25rem;
  --font-size-2xl:          1.5rem;
  --font-size-3xl:          2rem;
  --font-size-4xl:          2.5rem;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-bold:       700;
  --line-height-tight:      1.25;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.75;

  /* ── Spacing ────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border Radius ──────────────── */
  --radius-none: 0;
  --radius-sm:   0.125rem;
  --radius-md:   0.25rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 40px rgba(0,0,0,0.14);

  /* ── Transitions ────────────────── */
  --transition-fast:   100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}

<button class="fa-btn fa-btn-primary">Primary</button>
<button class="fa-btn fa-btn-accent">Accent</button>
<button class="fa-btn fa-btn-secondary">Secondary</button>
<button class="fa-btn fa-btn-ghost">Ghost</button>
<button class="fa-btn fa-btn-danger">Danger</button>

<div class="fa-chip">Filter A</div>
<div class="fa-chip selected">Active Filter</div>

<div class="fa-field">
  <label class="fa-label fa-label-required">Email</label>
  <input class="fa-input" type="email"
    placeholder="you@example.com">
  <span class="fa-helper">Helper text</span>
</div>

<span class="fa-badge fa-badge-success fa-badge-dot">Active</span>