@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette - Cinematic Visual Intelligence */
  --color-bg: #070a08;          /* Dark Base Background */
  --color-bg-darker: #040605;   /* Pitch Dark Background */
  --color-card-bg: #0f1411;     /* Card/Box Background */
  --color-border: #1e2621;      /* Subtle border green-grey */
  --color-text-main: #f3f4f6;   /* Main text: White/light grey */
  --color-text-muted: #9ca3af;  /* Secondary/Muted text: Gray */
  
  --color-orange: #e3791d;      /* Brand Orange (Signal) */
  --color-orange-hover: #f28f33;/* Brand Orange Hover */
  --color-orange-glow: rgba(227, 121, 29, 0.25); /* Orange glow */
  
  --color-green: #004a2a;       /* Brand Green (Depth/Trust) */
  --color-green-light: #0b663b; /* Accent green */
  --color-green-glow: rgba(0, 74, 42, 0.35); /* Green glow */

  --color-accent-primary: var(--color-orange);
  --color-accent-primary-hover: var(--color-orange-hover);
  --color-accent-primary-glow: var(--color-orange-glow);
  --color-accent-primary-alpha: rgba(227, 121, 29, 0.04);

  --color-accent-secondary: #10b981; /* High contrast green */
  --color-accent-secondary-hover: #059669;
  --color-accent-secondary-glow: rgba(16, 185, 129, 0.25);
  --color-accent-secondary-alpha: rgba(16, 185, 129, 0.04);

  /* Page-specific Theme Accent (Defaults to Green for general landing / animation pages) */
  --color-page-accent: var(--color-accent-secondary);
  --color-page-accent-hover: var(--color-accent-secondary-hover);
  --color-page-accent-glow: var(--color-accent-secondary-glow);
  --color-page-accent-alpha: var(--color-accent-secondary-alpha);

  /* Typography */
  --font-heading: 'Space Grotesk', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'IBM Plex Sans Thai', 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Layout constraints */
  --max-width-content: 1200px;
}