Style an ANTSAND website in 7 steps

You are styling an ANTSAND Databoard website via its REST API.

## Authentication

All requests use Bearer token auth:
```
-H "Authorization: Bearer YOUR_API_KEY"
```

## The 7-Step Workflow

### 1. List boards
GET /api/v1/databoards → returns array of boards with _id, boardname

### 2. Inspect the board
GET /api/v1/databoards/{BOARD_ID} → returns full JSON with:
- datalist[*].css.section.container — section root (theme goes here)
- datalist[*].css.data.container — grid/layout class
- datalist[*].css.data.sub_container — card wrapper class
- datalist[*].css.data.h3, .p, .cta, .img_container — content field classes
- sass — site-level SCSS

### 3. Patch field CSS classes
POST /api/v1/databoards/{BOARD_ID}/patch
Content-Type: application/json
Body: { "patch_delta": { "datalist.0.css.section.container": "antsand-section theme-dark-corporate", ... } }

### 4. Compile utilities
POST /api/v1/databoards/{BOARD_ID}/utilities/compile
Scans all css_class fields, generates board-local utility CSS.
Response includes: classes_found, utility_classes, rules_emitted, unsupported_classes

### 5. Deploy
POST /api/v1/databoards/{BOARD_ID}/deploy
Compiles templates, generates controllers/views, publishes the site.

### 6. Smoke test
curl -s -o /dev/null -w "%{http_code}" http://YOUR_SITE_URL/
Should return 200.

### 7. Iterate
Repeat steps 3→5 for each section. The loop is idempotent.

## Field → Rendered HTML Map

Databoard field         Rendered element     Fixed class
section.container   →   section              .section
section.h2          →   h2                   .data-h2
section.p           →   p                    .data-p
data.container      →   div                  .data-container
data.sub_container  →   div (per item)       .data-sub-container
data.img_container  →   div wrapping img     .data-img-container
data.h3             →   h3                   .data-h3
data.p              →   p                    .data-p
data.span           →   span                 .data-span
data.cta            →   a                    .data-cta

Your classes are APPENDED to the fixed class. e.g.:
  data.h3 = "text-fluid-lg line-clamp-2"
  renders: <h3 class="data-h3 text-fluid-lg line-clamp-2">

## Two-Tier Rule

Always use a Tier 1 semantic class first, then Tier 2 utilities:
✅ "antsand-section theme-dark-corporate"
✅ "antsand-grid md:grid-cols-3 gap-6"
✅ "antsand-btn antsand-btn-primary touch-target"
❌ "flex gap-4 p-6" (no semantic root)

## Available Theme Presets (set on section.container)

- theme-dark-corporate — dark navy, indigo accent, tech/SaaS
- theme-warm-editorial — cream/ivory, serif headings, blogs/magazines
- theme-minimal-clean — pure white, tight spacing, portfolios/docs
- theme-bold-gradient — dark gradient, glass cards, marketing/events

## Available Utility Classes (pre-compiled in antsand-v2.css)

Layout:       antsand-grid, md:grid-cols-2/3/4, lg:grid-cols-3/4, gap-4/6/8, flex, flex-col, flex-wrap
Typography:   text-fluid-sm/base/lg/xl/2xl/3xl/4xl/5xl, line-clamp-2/3, font-bold/semibold, text-center/left/right
Spacing:      p-1..8, px-*/py-*, m-1..8, mx-auto, sm:p-4, lg:p-8, sm:gap-4, lg:gap-8
Effects:      transition-all/fast/slow, hover:-translate-y-1, hover:scale-105, opacity-50/75, shadow-md/lg
Media:        aspect-video/square/photo, object-cover/contain, rounded-lg/full
Responsive:   sm:hidden, md:block, lg:flex, sm:text-sm, lg:text-2xl
Accessibility: sr-only, skip-to-content, touch-target/touch-target-lg, focus-ring, motion-safe:transition-all

## Styling Layers (what to change where)

- Field CSS (datalist[*].css.*) — MOST work happens here
- Site Sass (sass/common_styles) — one-off brand overrides
- /utilities/compile — auto-generates board-local CSS from field classes
- Sass v2 (styles_antsand/) — only for reusable framework changes

## Common Patterns

Services (3-col):
  section.container = "antsand-section theme-minimal-clean"
  data.container = "antsand-grid md:grid-cols-3 gap-6"
  data.h3 = "text-fluid-lg"
  data.p = "line-clamp-3 opacity-75"
  data.cta = "antsand-btn antsand-btn-primary"

Blog grid:
  section.container = "antsand-section theme-warm-editorial"
  data.container = "antsand-grid md:grid-cols-2 gap-8"
  data.img_container = "aspect-photo"
  data.h3 = "text-fluid-lg line-clamp-2"
  data.p = "line-clamp-3"

Pricing:
  section.container = "antsand-section theme-dark-corporate"
  data.container = "antsand-grid md:grid-cols-3 gap-6"
  data.span = "text-fluid-3xl font-bold"
  data.cta = "antsand-btn antsand-btn-primary touch-target-lg"

Hero:
  section.container = "antsand-section theme-bold-gradient"
  section.h2 = "text-fluid-4xl font-bold"
  section.p = "text-fluid-lg opacity-75"

## Troubleshooting

- Classes not rendering? → Call /utilities/compile before /deploy
- Theme not applying? → Theme class goes on section.container, not individual fields
- 401 error? → Check Bearer token with GET /api/v1/me
- Need custom CSS? → Patch sass.common_styles with SCSS targeting .data-h3, .data-sub-container, etc.