/* Project Design System: Astro Strategist (Mystical Tech) */
/* Source: .agent/skills/project_context/DESIGN_SYSTEM.md */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* 
     * Core Tokens
     */

  /* Colors */
  --primary: #c0a554;
  /* Primary Gold */
  --primary-light: #e0c574;
  /* Lighter Gold for Hover */
  --primary-dim: #8a7638;
  /* Dim Gold for borders/inactive */

  --bg-main: #121212;
  /* Background Dark */
  --bg-panel: #1a1a1a;
  /* Surface Dark */
  --bg-surface-lighter: #242424;
  /* Hover/Inputs */

  --color-design-red: #A33B3B;
  /* Unconscious */
  --color-personality-black: #0F7D7D;
  /* Conscious (Teal) */

  /* Text Colors */
  --text-main: #ffffff;
  --text-muted: #a1a1aa;
  --text-accent: var(--primary);

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.05);

  /* Effects */
  --shadow-glow: 0 0 15px rgba(192, 165, 84, 0.3);
  /* Gold Glow */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-heading: 'Manrope', 'Noto Sans TC', sans-serif;
  --font-body: 'Manrope', 'Noto Sans TC', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Spacing & Layout */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  --header-height: 4rem;
  --panel-gap: 1rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  /* Higher radius for current design */

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
}

:root:lang(zh-TW) {
  --leading-base: 1.7;
}