/* ============================================================
   MODx Pro — Design Tokens (PDE glass-effect style)
   ============================================================ */

:root {
  /* Brand Colors — Orange/Gold */
  --primary:      #F7941D;
  --primary-s:    #ffaa3d;
  --primary-a10:  rgba(247, 148, 29, 0.10);
  --primary-a20:  rgba(247, 148, 29, 0.20);
  --primary-a50:  rgba(247, 148, 29, 0.50);

  /* Accent: Teal */
  --teal:         #20d9a0;
  --teal-a:       rgba(32, 217, 160, 0.15);
  --teal-b:       #29C5F6;

  /* Accent: Purple */
  --purple:       #a855f7;
  --purple-a:     rgba(168, 85, 247, 0.15);

  /* Utility */
  --success:      #22c55e;
  --danger:       #ef4444;
  --amber:        #f59e0b;
  --amber-a:      rgba(245, 158, 11, 0.15);
  --blue:         #3b82f6;
  --blue-a:       rgba(59, 130, 246, 0.15);
  --cyan:         #06b6d4;
  --youtube:      #FF0000;

  /* Background */
  --bg:           #000000;

  /* Glass surfaces */
  --glass:        rgba(255, 255, 255, 0.03);
  --glass-hover:  rgba(255, 255, 255, 0.06);

  /* Borders — directional lighting (top brighter) */
  --border-t:     rgba(255, 255, 255, 0.15);
  --border-s:     rgba(255, 255, 255, 0.08);
  --border-b:     rgba(255, 255, 255, 0.05);

  /* Text hierarchy */
  --t1:           #ffffff;
  --t2:           rgba(255, 255, 255, 0.70);
  --t3:           rgba(156, 163, 175, 1);
  --t4:           rgba(107, 114, 128, 1);

  /* Easing */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --spring:       cubic-bezier(0.23, 1, 0.32, 1);

  /* Typography */
  --ff:           'Open Sans', sans-serif;
  --ff-h:         'Montserrat', sans-serif;
  --ff-mono:      'JetBrains Mono', monospace;

  /* Spacing */
  --pad:          clamp(20px, 5vw, 80px);
  --r-sm:         8px;
  --r-md:         12px;
  --r-lg:         20px;
  --r-xl:         28px;
  --r-full:       9999px;

  /* Type scale */
  --text-xs:      0.72rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
}