---
name: Zodiac Compatibility v2
description: >-
  Private zodiac compatibility — Western and Chinese astrology under a Deep Sky canvas.
colors:
  # Elevation scale — structural surfaces (chromatic neutral, dark-only)
  surface-page: "oklch(10% 0.002 260)"
  surface-nav: "oklch(14% 0.002 260)"
  surface-card: "oklch(18% 0.003 260)"
  surface-modal: "oklch(22% 0.003 260)"
  surface-separator: "oklch(25% 0.002 260)"
  border-structural: "oklch(28% 0.003 260)"
  border-ui: "oklch(35% 0.005 260)"
  surface-hover: "oklch(26% 0.003 260)"
  control-solid: "oklch(45% 0.004 260)"
  control-hover: "oklch(52% 0.004 260)"

  # Text
  text-primary: "oklch(94% 0.002 260)"
  text-body: "oklch(78% 0.002 260)"
  text-secondary: "oklch(55% 0.002 260)"
  text-muted: "oklch(42% 0.002 260)"

  # CTA — warm gold
  cta-fill: "oklch(75% 0.12 85)"
  cta-fill-hover: "oklch(80% 0.12 85)"
  cta-text: "oklch(12% 0.002 260)"

  # Focus ring
  focus-ring: "oklch(35% 0.005 260)"

  # Western zodiac signs — dark-mode corrected
  zodiac-aries: "oklch(56% 0.18 25)"
  zodiac-taurus: "oklch(55% 0.14 145)"
  zodiac-gemini: "oklch(82% 0.12 95)"
  zodiac-cancer: "oklch(52% 0.12 255)"
  zodiac-leo: "oklch(62% 0.16 55)"
  zodiac-virgo: "oklch(48% 0.08 65)"
  zodiac-libra: "oklch(62% 0.12 350)"
  zodiac-scorpio: "oklch(32% 0.02 285)"
  zodiac-sagittarius: "oklch(54% 0.15 310)"
  zodiac-capricorn: "oklch(45% 0.015 260)"
  zodiac-aquarius: "oklch(68% 0.08 230)"
  zodiac-pisces: "oklch(60% 0.10 170)"

  # Birth-year element — 10 Heavenly Stems (5 elements × yin/yang)
  element-geng-metal-yang: "oklch(72% 0.03 90)"
  element-xin-metal-yin: "oklch(58% 0.02 90)"
  element-ren-water-yang: "oklch(42% 0.06 240)"
  element-gui-water-yin: "oklch(38% 0.05 240)"
  element-jia-wood-yang: "oklch(58% 0.16 140)"
  element-yi-wood-yin: "oklch(48% 0.12 140)"
  element-bing-fire-yang: "oklch(60% 0.20 25)"
  element-ding-fire-yin: "oklch(50% 0.16 25)"
  element-wu-earth-yang: "oklch(74% 0.12 90)"
  element-ji-earth-yin: "oklch(62% 0.08 85)"

typography:
  display:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "clamp(2.25rem, 6vw, 3rem)"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: 1.3
  title:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: 1.4
  body:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.05em"
rounded:
  card: "12px"
  button: "8px"
  badge: "9999px"
  advice-box: "8px"
spacing:
  card: "24px"
  content-gap: "32px"
  section-gap: "12px"
  inline-gap: "16px"
  button-h: "24px"
  button-v: "12px"
  advice-box: "12px"
components:
  button-primary:
    backgroundColor: "{colors.cta-fill}"
    textColor: "{colors.cta-text}"
    rounded: "{rounded.button}"
    padding: "12px 24px"
  card-identity:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text-body}"
    rounded: "{rounded.card}"
    padding: "24px"
    borderTop: "2px gradient — Western color (left 50%) + element color (right 50%)"
  rating-badge:
    rounded: "{rounded.badge}"
    padding: "4px 12px"
---

# Design System: Zodiac Compatibility — v2 "Deep Field"

## Token Architecture

All surfaces derive from a single chromatic-neutral blue-grey ramp. Zodiac
colors are edge accents only — never fills, never text, never large floods.
The CTA is warm gold, the only warm element on the page.

**Layer model:**
- Base: page background (L:10%)
- Nav: header strip (L:14%)
- Cards: identity + content surfaces (L:18%)
- Modal: elevated dialogs (L:22%)
- Borders: structural (L:28%), UI/focus (L:35%)

**Color model:**
- 12 Western zodiac signs — dark-mode corrected, edge-only
- 10 birth-year element tokens (5 elements × yin/yang)
- 1 CTA gold — sole warm accent
- 4 text levels (primary 94%, body 78%, secondary 55%, muted 42%)

## Direction: Deep Field (Approved)

A near-monochrome night sky canvas. Zodiac identity appears as a 2px
top-edge rule on sign-identity cards, horizontally split at the midpoint:
Western sign color on the left half, birth-year element color on the right.
The rest of the card is elevation-only neutral. Zodiac colors appear
nowhere else on the page.

## CSS Implementation

All tokens are emitted as custom properties in `src/app/tokens.css`:

```css
:root {
  --z-surface-page: oklch(10% 0.002 260);
  --z-surface-card: oklch(18% 0.003 260);
  --z-border-structural: oklch(28% 0.003 260);
  --z-cta-fill: oklch(75% 0.12 85);
  --z-cta-text: oklch(12% 0.002 260);
  --z-text-primary: oklch(94% 0.002 260);
  /* ... all 22 zodiac colors, 10 elements, etc. */
}
```

Tailwind `@theme` extends the utility scale with these tokens so they're
available as `bg-z-surface-card`, `text-z-text-primary`, etc.