# 04 — Design System Extraction

Convert Divi theme settings into AM CSS custom properties.
The goal is to ENHANCE the design — cleaner, more modern — not replicate it.

## Input

`design-system.json` produced by `analyze_db.py`. Key fields:

```json
{
  "primary_color":    "#1a8a7a",
  "body_font":        "DM Sans",
  "header_font":      "DM Serif Display",
  "body_font_size":   "16",
  "body_line_height": "1.7",
  "site_name":        "VibrantYou Yoga"
}
```

## Color palette strategy

Never lift the Divi palette 1:1. Use extracted colors as the base and build a
full 5-step scale around the primary hue:

| Token | Derived from | Role |
|-------|-------------|------|
| `--color-primary`   | Divi accent_color | Buttons, links, active states |
| `--color-primary-dark` | Darken primary 15% | Hover states, section backgrounds |
| `--color-primary-light` | Lighten primary 40% | Subtle tints, borders |
| `--color-surface`   | Always `#fafafa` | Page background |
| `--color-surface-alt` | `#f3f3f3` | Alternating sections |
| `--color-text`      | Always `#1a1a1a` | Body copy |
| `--color-text-muted` | `#666` | Subheadings, captions |
| `--color-border`    | 10% primary or `#e0e0e0` | Dividers, inputs |
| `--color-white`     | `#ffffff` | Card backgrounds, hero text |

For VibrantYou Yoga (primary `#1a8a7a`, dark `#0f5f53`):

```css
:root {
  --color-primary:       #1a8a7a;
  --color-primary-dark:  #0f5f53;
  --color-primary-light: #d4f0eb;
  --color-surface:       #fafafa;
  --color-surface-alt:   #f0f7f6;
  --color-text:          #1a1a1a;
  --color-text-muted:    #5a6e6b;
  --color-border:        #c8dedd;
  --color-white:         #ffffff;
}
```

## Typography strategy

Use the extracted fonts but upgrade the type scale.
Divi's default type scale is too small and too flat. Aim for 1.25–1.333 modular ratio.

```css
:root {
  /* Fonts from design-system.json */
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-heading: 'DM Serif Display', Georgia, serif;

  /* Modular scale (1.25 ratio from 16px base) */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}
```

## Spacing and layout

Divi uses pixel-based margins/paddings that must be converted to a consistent
rem-based spacing scale:

```css
:root {
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Section vertical padding */
  --section-py: var(--space-20);   /* 80px default */
  --section-py-sm: var(--space-12); /* 48px mobile */

  /* Container */
  --container-max: 1200px;
  --container-px:  var(--space-6);

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12);
}
```

## Google Fonts import

For DM Sans + DM Serif Display:

```html
<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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
```

## Enhancement rules (required)

These upgrades apply to every AM migration regardless of source:

1. **Increase contrast** — body text must be #1a1a1a on white (WCAG AA minimum).
   Never use the grey-on-grey color schemes that Divi themes commonly use.

2. **Whitespace is content** — section padding must be at minimum 80px vertical
   on desktop. Divi often uses 40-60px which feels cramped.

3. **One weight per heading level** — h1 at 700, h2 at 600, h3 at 500.
   Divi often leaves all headings at the same weight.

4. **Max-width prose** — body copy containers max 680px wide. Divi stretches
   copy to full column width on 1200px screens, which is unreadable.

5. **Brand color is a highlight, not a wallpaper** — primary color should
   appear on buttons, links, and 1-2 hero sections only. Divi sites often
   paint every other section in the primary color.

## Output: main.css variables block

Write the complete `:root {}` block into `src/assets/css/main.css` as the
first section. All other CSS rules reference only `var(--token-name)`.
Never hard-code a color, font, or spacing value outside of `:root`.

## Next step

Proceed to `05-content-migration.md` to map extracted content into AM HTML
templates using this design system.