---
name: Sacred Serenity Dark
colors:
  surface: '#0f1412'
  surface-dim: '#0f1412'
  surface-bright: '#353a38'
  surface-container-lowest: '#0a0f0d'
  surface-container-low: '#181d1a'
  surface-container: '#161f1c'
  surface-container-high: '#262b29'
  surface-container-highest: '#313633'
  on-surface: '#dfe4e0'
  on-surface-variant: '#bbcabf'
  inverse-surface: '#dfe4e0'
  inverse-on-surface: '#2c322f'
  outline: '#86948a'
  outline-variant: '#3c4a42'
  surface-tint: '#4edea3'
  primary: '#4edea3'
  on-primary: '#003824'
  primary-container: '#10b981'
  on-primary-container: '#00422b'
  inverse-primary: '#006c49'
  secondary: '#ffc640'
  on-secondary: '#402d00'
  secondary-container: '#e3aa00'
  on-secondary-container: '#5a4100'
  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: '#ffdf9f'
  secondary-fixed-dim: '#f9bd22'
  on-secondary-fixed: '#261a00'
  on-secondary-fixed-variant: '#5c4300'
  tertiary-fixed: '#ffdad7'
  tertiary-fixed-dim: '#ffb3af'
  on-tertiary-fixed: '#410005'
  on-tertiary-fixed-variant: '#842225'
  background: '#0f1412'
  on-background: '#dfe4e0'
  surface-variant: '#313633'
  deep-emerald-black: '#050807'
  surface-emerald: '#0d1412'
  on-surface-muted: '#94a3b8'
  gold-vibrant: '#f59e0b'
typography:
  display-quran:
    fontFamily: Noto Serif
    fontSize: 40px
    fontWeight: '500'
    lineHeight: 72px
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Noto Serif
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
  headline-lg-mobile:
    fontFamily: Noto Serif
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-reading:
    fontFamily: Source Serif 4
    fontSize: 20px
    fontWeight: '400'
    lineHeight: 36px
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 16px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  container-padding: 24px
  gutter: 16px
  section-gap: 40px
  reading-margin-desktop: 80px
---

## Brand & Style
The design system transitions into a nocturnal state of reflection, shifting from the "parchment" aesthetic to one of "deep midnight prayer." The brand personality remains tranquil and reverent but adopts a more immersive, focused tone. 

The style is **Minimalist with Tactile accents**. By utilizing a very dark, desaturated emerald base, the UI minimizes light emission and ocular fatigue, creating a "sanctuary" for the user. The skeuomorphic influences remain through subtle light-trapping on borders and soft, glowing active states that mimic the flicker of a lamp in a quiet room. The emotional response is one of deep focus, solitude, and spiritual intimacy.

## Colors
The dark mode palette is engineered for high contrast and spiritual warmth against a near-black foundation.

- **Primary (Vibrant Emerald):** #10B981 is used for active states and critical path actions. It is shifted toward a higher luminosity to "pop" against the dark background while maintaining its association with life.
- **Secondary/Tertiary (Luminous Gold):** #FBBF24 acts as the highlight color for sacred markers and borders. It should feel like metallic gold leaf catching a soft light source.
- **Neutral/Surface:** The background uses #050807 (Deep Emerald Black), providing a richer, more sophisticated depth than pure charcoal.
- **Text Hierarchy:** Primary text uses a high-contrast off-white (#F8FAFC) to ensure maximum legibility without the harshness of pure #FFFFFF. Secondary text uses soft grays to recede into the background.

## Typography
The typographic hierarchy remains centered on the sanctity of the text. 

- **Sacred Text:** Use Source Serif 4 for the primary reading experience. In dark mode, ensure the font weight feels balanced; dark backgrounds can sometimes make light text appear "thicker" (halation), so avoid using weights above 400 for long-form reading.
- **Display:** Noto Serif provides the authoritative structure for Surah headings. Use the gold accent color for titles to denote their importance.
- **Functional UI:** Plus Jakarta Sans provides a technical, clean contrast for navigation, ensuring the interface does not feel overly "antique" or heavy.

## Layout & Spacing
The layout employs a **Fixed Grid** for reading views to ensure the user's eye doesn't have to travel too far across the screen. 

- **Reading Mode:** Utilize a centered 800px column for the Quranic text. On mobile, provide a minimum of 20px side margins. 
- **Rhythm:** Spacing should be generous. Use `section-gap` (40px) between distinct Ayahs or thematic blocks to encourage a slow, meditative pace.
- **Reflow:** On tablet devices, the layout should transition from a single-column reading view to a split-view only if the secondary content (translation/Tafsir) is active.

## Elevation & Depth
In this dark mode environment, depth is achieved through **Tonal Layering** and **Subtle Inner Glows** rather than shadows.

- **Level 0 (Base):** #050807 (Deep Emerald Black).
- **Level 1 (Cards/Surfaces):** #0D1412. These surfaces should have a very subtle 1px border of #10B981 at 10% opacity to define the edge.
- **Level 2 (Popovers/Modals):** #161F1C. These should use a backdrop blur (12px-16px) to maintain a sense of the dark emerald space behind them.
- **Active State Elevation:** Use a "glow" effect—a soft outer shadow using the primary emerald color at 15% opacity—to make active buttons or Ayah markers feel like they are emitting light.

## Shapes
The system uses the **Rounded (0.5rem / 8px)** standard for all primary UI components.

- **Surfaces:** Cards and input fields use the base 8px radius to maintain a modern, approachable feel.
- **Pill Shapes:** Use for interactive chips, progress bars, and high-level navigation items to provide a soft counterpoint to the structured serif typography.
- **Iconography:** Icons should be contained within circular or 8-pointed star frames when used as primary action buttons (e.g., Play/Pause).

## Components
- **Surah Navigation Cards:** Use a subtle gradient background from #0D1412 to #050807. The Surah name should be in Gold (#FBBF24).
- **Reading View:** The background should be entirely clear of interface elements unless tapped. The Ayah currently being read should be highlighted with a soft Emerald (#10B981) left-border or a very faint background tint.
- **Buttons:** Primary buttons should be Solid Emerald with White text. Secondary buttons should be Outlined Gold with Gold text.
- **Input Fields:** Darker than the surface (#050807) with an Emerald border on focus. Use Plus Jakarta Sans for the input text.
- **Ayah Marker:** A vector 8-pointed star (Rub el Hizb) with the Ayah number centered. In dark mode, the star should be Gold and the number should be White for maximum clarity.
- **Audio Player:** A persistent bottom bar in #161F1C. The playhead should be Gold, and the progress track a muted Emerald.