---
name: Sacred Gold & Emerald
colors:
  surface: '#051424'
  surface-dim: '#051424'
  surface-bright: '#2c3a4c'
  surface-container-lowest: '#010f1f'
  surface-container-low: '#0d1c2d'
  surface-container: '#122131'
  surface-container-high: '#1c2b3c'
  surface-container-highest: '#273647'
  on-surface: '#d4e4fa'
  on-surface-variant: '#bbcabf'
  inverse-surface: '#d4e4fa'
  inverse-on-surface: '#233143'
  outline: '#86948a'
  outline-variant: '#3c4a42'
  surface-tint: '#4edea3'
  primary: '#4edea3'
  on-primary: '#003824'
  primary-container: '#10b981'
  on-primary-container: '#00422b'
  inverse-primary: '#006c49'
  secondary: '#e9c349'
  on-secondary: '#3c2f00'
  secondary-container: '#af8d11'
  on-secondary-container: '#342800'
  tertiary: '#ffb3af'
  on-tertiary: '#650911'
  tertiary-container: '#fc7c78'
  on-tertiary-container: '#711419'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#6ffbbe'
  primary-fixed-dim: '#4edea3'
  on-primary-fixed: '#002113'
  on-primary-fixed-variant: '#005236'
  secondary-fixed: '#ffe088'
  secondary-fixed-dim: '#e9c349'
  on-secondary-fixed: '#241a00'
  on-secondary-fixed-variant: '#574500'
  tertiary-fixed: '#ffdad7'
  tertiary-fixed-dim: '#ffb3af'
  on-tertiary-fixed: '#410005'
  on-tertiary-fixed-variant: '#842225'
  background: '#051424'
  on-background: '#d4e4fa'
  surface-variant: '#273647'
typography:
  display-lg:
    fontFamily: notoSerif
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: notoSerif
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.3'
  headline-sm:
    fontFamily: notoSerif
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.4'
  verse-text:
    fontFamily: notoSerif
    fontSize: 28px
    fontWeight: '400'
    lineHeight: '1.8'
    letterSpacing: 0.01em
  body-lg:
    fontFamily: inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  label-sm:
    fontFamily: inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 8px
  container-padding: 24px
  gutter: 16px
  section-gap: 48px
---

## Brand & Style

The design system is centered on a majestic, spiritual, and high-contrast aesthetic. It targets an audience seeking a sense of reverence, tranquility, and premium craftsmanship. The emotional response is one of "Atmospheric Devotion"—combining the infinite depth of a midnight sky with the illuminating glow of sacred artifacts.

The style is a hybrid of **Minimalist-Luxury** and **Tactile-Digital**. It utilizes expansive dark surfaces to allow metallic accents and vibrant emerald highlights to serve as primary focal points. The interface feels like a finely bound leather book or a dimly lit sanctuary where light is used intentionally to guide the spirit and the eye.

## Colors

The palette is strictly dark-mode, designed to minimize eye strain and maximize the perceived value of the content.

*   **Primary (Emerald):** Used for primary calls to action, active states, and success indicators. It represents life and growth.
*   **Secondary (Metallic Gold):** Reserved for headings, decorative borders, and premium accents. It signifies the sacred nature of the information.
*   **Surface (Charcoal Black):** The foundation of all views. This deepest black creates an infinite backdrop that makes emerald glows pop.
*   **Neutral (Slate):** Used for secondary text and low-priority iconography to ensure the primary colors remain impactful.

## Typography

Typography in this design system balances the classical authority of serif fonts with the functional clarity of sans-serif.

*   **Headlines & Verses:** Utilize `notoSerif` (as a high-quality alternative to traditional calligraphic serifs) to provide an editorial, timeless feel. Verse text requires higher line-height (1.8) to allow for diacritics and breathing room between lines.
*   **UI & Secondary Text:** `inter` provides a systematic, utilitarian contrast to the decorative headings, ensuring that navigational elements remain legible and grounded.
*   **Emphasis:** Gold color is frequently applied to `display-lg` and `headline-md` levels to establish a strong visual hierarchy.

## Layout & Spacing

The layout follows a **Fixed-Fluid Hybrid** model. Content is centered within a maximum width of 1200px on desktop to maintain a reading-focused experience, while margins expand on larger displays.

*   **Rhythm:** A strict 8px grid governs all spacing.
*   **Margins:** On mobile, a minimum side margin of 20px is required. On tablet and above, this increases to 48px or auto-centering.
*   **Verticality:** High amounts of white space (or "black space") are encouraged between sections to create a sense of scale and importance.

## Elevation & Depth

Depth is conveyed through **Tonal Layering** and **Luminescence** rather than traditional drop shadows.

*   **Layers:** Surface levels are built by slightly lightening the charcoal background (e.g., `#0A0D0C`) for cards and modals.
*   **Borders:** Use 1px metallic gold borders (`#d4af37` at 40-60% opacity) to define boundaries without heavy shadows.
*   **Glows:** Primary emerald elements should have a subtle `0px 0px 20px` outer glow at low opacity (15%) to simulate light emanating from a spiritual source.
*   **Glassmorphism:** Modals use a heavily blurred (`20px`) backdrop with a faint gold rim.

## Shapes

The design system uses a consistent **Rounded** language. 

*   **Standard Radius:** 16px (1rem) for all cards, containers, and large input fields.
*   **Buttons:** Should follow the 16px radius to maintain the soft, approachable feel of the system.
*   **Ornamentation:** While corners are rounded, the internal alignment of text remains sharp and structured to respect the grid.

## Components

*   **Buttons:** 
    *   *Primary:* Solid Emerald Green background with white or black text. Subtle glow on hover.
    *   *Secondary:* Transparent background with a 1px Gold border. Text in Gold.
*   **Cards:** Background set to a slightly lighter charcoal than the main surface. Always include a 1px gold border top or a full border at 20% opacity.
*   **Input Fields:** Ghost style with a bottom-only gold border or full 16px rounded border in dark slate. Emerald cursor/focus ring.
*   **Chips:** Pill-shaped with a 1px emerald border for active states and slate for inactive.
*   **Lists:** Separated by thin, low-opacity gold horizontal lines.
*   **Specialty Component (The Verse Block):** A dedicated container for sacred text featuring a 2px gold left-border, increased internal padding, and Noto Serif typography at a larger scale.