JIAOZI THEME - README
================================================================================

Jiaozi is a custom Drupal theme (v10.3+) designed using a component-based 
architecture (SDC) and a flexible grid system. The aesthetic is inspired by 
Chinese motifs, blending traditional geometric patterns with a clean, 
modern interface.

--------------------------------------------------------------------------------
1. DESIGN SYSTEM
--------------------------------------------------------------------------------

The theme centralizes its visual identity through CSS Custom Properties:

* Brand Colors:
    --jiaozi-red: Header background (#A61908)
    --jiaozi-gold: Menu background and primary accents (#E6C46A)
    --jiaozi-accent-cream: Subtle frame details and backgrounds (#ECE6C8)

* UI: Global cream background (#F4EFE6) and dark primary text (#333333) for 
  high contrast.

* Multilingual Support (Chinese Optimization):
 The theme includes get some CSS to improve the readability of chinese characters. 
 When the site language is set to Simplified or Traditional Chinese, 
 the font size and line height automatically adjust:

  [lang="zh-hans"] body, [lang="zh-hant"] body {
    font-size: 110%;
    line-height: 1.6;
  }

--------------------------------------------------------------------------------
2. REGION ARCHITECTURE
--------------------------------------------------------------------------------

The layout features full-width utility sections and a centralized content 
container.

* Top (Full Width):
    - header
    - primary_menu

* Announcements:
    - blink: Region featuring an infinite CSS fade animation.

* Main Content:
    - breadcrumb
    - highlighted
    - content
    - sidebar_first
    - sidebar_second

* Lower Regions (Content Down):
    - content_down_first: Lower left column (automatically uses red variant).
    - content_down_second: Lower right column (automatically uses gold variant).

* Footer: Global site footer.

--------------------------------------------------------------------------------
3. COMPONENTS & AUTOMATIC TEMPLATING
--------------------------------------------------------------------------------

3.1. Geometric Frame (jiaozi:geometric-frame)
- red Variant: Red geometric perimeter frame.
- gold Variant: Gold perimeter frame (updated to match the red geometric pattern
  in color #E4D170).
- maze Variant: Corner-only pattern inspired by traditional maze motifs.

3.2. Search Box (jiaozi:search-box)
A responsive search bar with a thick gold border and a pill-shaped button.

--------------------------------------------------------------------------------
4. TECHNICAL DETAILS
--------------------------------------------------------------------------------

* Base Theme: claro (with custom overrides for centering).
* Automation: Uses hook_theme_suggestions_block_alter in jiaozi.theme to apply 
  component variants based on the active region.
* Accessibility: Respects prefers-reduced-motion for the Blink region.

--------------------------------------------------------------------------------
Developed with a focus on modularity and cultural design inspiration.
================================================================================