/* Access via CSS variables */
background-color: var(--color-background);
color: var(--color-text);
border-color: var(--color-border);

/* Or in Tailwind classes */
<div class="bg-[var(--color-surface)] text-[var(--color-text)]">
  Content
</div>

<h1 class="font-heading text-5xl font-bold">Heading 1</h1>
<h2 class="font-heading text-4xl font-bold">Heading 2</h2>
<h3 class="font-heading text-3xl font-semibold">Heading 3</h3>
<h4 class="font-heading text-2xl font-semibold">Heading 4</h4>
<h5 class="font-heading text-xl font-medium">Heading 5</h5>
<h6 class="font-heading text-lg font-medium">Heading 6</h6>

import { generateGoldenScale } from '@/config';

const scale = generateGoldenScale(8); // Base 8px

// scale.values: [3.05, 4.94, 8, 12.94, 20.94, 33.89, ...]
// scale.rem: ['0.19rem', '0.31rem', '0.5rem', '0.81rem', ...]

// Component spacing
<div class="p-[var(--padding-md)]">...</div>
<div class="gap-[var(--gap-lg)]">...</div>

// Section spacing
<section class="py-[var(--section-py-lg)]">...</section>

// Layout spacing
<main class="px-[var(--container-padding)]">...</main>

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

<Button variant="primary">
  <InlineIcon name="mail" size="sm" />
  Send Email
</Button>

<Button variant="outline">
  Learn More
  <InlineIcon name="arrow-right" size="sm" />
</Button>

<Button variant="primary" size="icon">
  <InlineIcon name="plus" size="md" />
</Button>

<Button disabled>Disabled</Button>
<Button class="opacity-75 cursor-wait">
  <span class="animate-spin">⟳</span>
  Loading...
</Button>

<Button href="/about" variant="primary">
  Go to About
</Button>

<Button class="w-full">Full Width Button</Button>

<!-- Flat -->
<div class="bg-[var(--color-surface)] p-6 rounded-xl">
  Card content
</div>

<!-- Elevated -->
<div class="bg-[var(--color-surface)] p-6 rounded-xl shadow-lg">
  Card content
</div>

<!-- Outlined -->
<div class="border border-[var(--color-border)] p-6 rounded-xl">
  Card content
</div>

<!-- Glass -->
<div class="bg-white/10 backdrop-blur-md p-6 rounded-xl border border-white/20">
  Card content
</div>

<!-- Solid -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-secondary)] text-white">
  Badge
</span>

<!-- Soft -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-secondary)]/10 text-[var(--color-secondary)]">
  Badge
</span>

<!-- Outline -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium border border-[var(--color-secondary)] text-[var(--color-secondary)]">
  Badge
</span>

<!-- Default -->
<input
  type="text"
  placeholder="Default input"
  class="w-full px-4 py-2.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text)] focus:border-[var(--color-secondary)] focus:ring-2 focus:ring-[var(--color-secondary)]/20"
/>

<!-- Default -->
<a href="#" class="text-[var(--color-secondary)] hover:underline">
  Default Link
</a>

<!-- Underline -->
<a href="#" class="text-[var(--color-secondary)] underline hover:no-underline">
  Underline Link
</a>

<!-- Subtle -->
<a href="#" class="text-[var(--color-text-muted)] hover:text-[var(--color-text)]">
  Subtle Link
</a>

<InlineIcon name="star" size="xs" />  <!-- 12px -->
<InlineIcon name="star" size="sm" />  <!-- 16px -->
<InlineIcon name="star" size="md" />  <!-- 20px -->
<InlineIcon name="star" size="lg" />  <!-- 24px -->
<InlineIcon name="star" size="xl" />  <!-- 32px -->
<InlineIcon name="star" size="2xl" /> <!-- 48px -->

<!-- Custom pixel size -->
<InlineIcon name="star" size={28} />

<InlineIcon name="check" preset="button-icon" />
<InlineIcon name="home" preset="nav-icon" />
<InlineIcon name="twitter" preset="social-icon" />
<InlineIcon name="zap" preset="feature-icon" />
<InlineIcon name="check" preset="status-success" />

<InlineIcon name="heart" class="text-red-500" />
<InlineIcon name="star" color="#f59e0b" />
<InlineIcon name="check" class="text-green-500" strokeWidth={3} />

<ConfigurableContactForm
  preset="saas-default"
  formAction="/api/contact"
/>

<ConfigurableContactForm
  preset="saas-modern"
  layout="two-column"
/>

<ConfigurableContactForm
  preset="saas-compact"
  layout="compact"
  size="sm"
/>

<ConfigurableContactForm
  preset="saas-card"
  layout="card"
/>

<NewsletterForm preset="default-inline" />

<NewsletterForm
  preset="default-stacked"
  layout="stacked"
/>

<NewsletterForm
  preset="minimal-icon"
  layout="minimal"
/>

<NewsletterForm
  preset="modern-card"
  layout="card"
  title="Stay Updated"
  description="Get the latest news delivered to your inbox."
/>

<NewsletterForm
  preset="modern-floating"
  layout="floating"
/>

<NewsletterForm
  preset="default-inline"
  layout="with-name"
  showName={true}
/>

<NewsletterForm
  layout="with-preferences"
  preferences={[
    { id: 'news', label: 'Product news', checked: true },
    { id: 'tips', label: 'Tips & tutorials' },
    { id: 'offers', label: 'Special offers' },
  ]}
/>

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Category' }
  ]}
  variant="default"
/>

<SEO
  title="Our Company"
  description="Company description"
  siteConfig={{
    name: "Company Name",
    url: "https://example.com",
    email: "[email protected]",
    logo: "/logo.png",
    socialLinks: ["https://twitter.com/company"]
  }}
  includeOrganizationSchema={true}
/>

<SEO
  title="Our Restaurant"
  industry="restaurant-food"
  siteConfig={{
    name: "Restaurant Name",
    url: "https://example.com",
    telephone: "+1-555-1234",
    priceRange: "$$",
    openingHours: [
      { days: ["Mon", "Tue"], opens: "09:00", closes: "22:00" }
    ]
  }}
/>

<SEO
  title="Article Title"
  description="Article excerpt"
  type="article"
  article={{
    datePublished: "2024-01-15",
    dateModified: "2024-01-20",
    author: { name: "John Doe" },
    section: "Technology"
  }}
  siteConfig={{
    name: "Blog Name",
    url: "https://blog.example.com"
  }}
/>

<SEO
  title="Product Name"
  description="Product description"
  type="product"
  product={{
    sku: "PRD-001",
    price: 49,
    currency: "EUR",
    availability: "InStock",
    brand: "Brand Name",
    rating: 4.8,
    reviewCount: 156
  }}
/>

<SEO
  title="John Doe - Designer"
  description="Creative designer portfolio"
  type="profile"
  person={{
    name: "John Doe",
    jobTitle: "UX Designer",
    description: "10+ years experience",
    skills: ["UX", "UI", "Figma"],
    socialLinks: ["https://twitter.com/johndoe"]
  }}
/>

<SEO
  title="FAQ"
  type="faq"
  faqs={[
    { question: "What payment methods?", answer: "We accept..." },
    { question: "Do you offer refunds?", answer: "Yes, 30-day..." },
  ]}
/>

<SEO
  title="Page Title"
  breadcrumbs={[
    { name: "Home", url: "/" },
    { name: "Products", url: "/products/" },
    { name: "Current Page" }
  ]}
/>

import { getFocusClasses } from '@/config';

// Different focus styles
const outlineFocus = getFocusClasses({ style: 'outline' });
const ringFocus = getFocusClasses({ style: 'ring' });
const ringOffsetFocus = getFocusClasses({ style: 'ring-offset' });
const glowFocus = getFocusClasses({ style: 'glow' });
const underlineFocus = getFocusClasses({ style: 'underline' });
const boxFocus = getFocusClasses({ style: 'box' });

import SkipLink from '@/components/common/SkipLink.astro';

// Default skip links
<SkipLink />

// Custom configuration
<SkipLink
  preset="high-contrast"
  links={[
    { label: 'Skip to main', target: '#main-content' },
    { label: 'Skip to search', target: '#search' },
  ]}
/>

import { ariaPatterns, getAriaAttributes } from '@/config';

// Get ARIA attributes for a dialog
const dialogAttrs = getAriaAttributes('dialog', {
  ariaLabelledBy: 'dialog-title',
  ariaDescribedBy: 'dialog-description',
});

// Result: {
//   role: 'dialog',
//   'aria-modal': true,
//   'aria-labelledby': 'dialog-title',
//   'aria-describedby': 'dialog-description'
// }

import { getContrastRatio, meetsContrastRequirement, getContrastRating } from '@/config';

// Check contrast ratio
const ratio = getContrastRatio('#000000', '#ffffff'); // 21

// Check if it meets requirements
const meetsAA = meetsContrastRequirement('#000000', '#ffffff', 'AA'); // true
const meetsAAA = meetsContrastRequirement('#000000', '#ffffff', 'AAA'); // true

// Get rating
const rating = getContrastRating(ratio); // 'AAA'

import { keyboardKeys, keyboardHandlerScript } from '@/config';

// Use keyboard keys constant
element.addEventListener('keydown', (e) => {
  if (e.key === keyboardKeys.ESCAPE) {
    closeModal();
  }
});

// Use KeyboardNavigation class (from script)
const nav = new KeyboardNavigation(menuElement, {
  itemSelector: '[role="menuitem"]',
  orientation: 'vertical',
  loop: true,
});

import { getReducedMotionClasses, generateReducedMotionCSS } from '@/config';

// Get utility classes
const classes = getReducedMotionClasses();
// Result: 'motion-safe:transition motion-reduce:transition-none ...'

// In your CSS
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

import VisuallyHidden from '@/components/common/VisuallyHidden.astro';
import LiveRegion from '@/components/common/LiveRegion.astro';

// Visually hidden text
<VisuallyHidden>This is only read by screen readers</VisuallyHidden>

// Live region for announcements
<LiveRegion id="status" politeness="polite" />

// Announce with JavaScript
window.announce('Form submitted successfully', 'polite');

import FocusTrap from '@/components/common/FocusTrap.astro';

// Wrap your modal content
<FocusTrap id="my-modal" active={isOpen}>
  <div role="dialog" aria-modal="true">
    <h2>Modal Title</h2>
    <p>Modal content...</p>
    <button>Close</button>
  </div>
</FocusTrap>

// JavaScript control
const trap = document.getElementById('my-modal').focusTrap;
trap.activate();   // Enable trap
trap.deactivate(); // Disable trap
trap.toggle();     // Toggle state