/* ALA Design System - CSS Variables
 * Extracted from Claude's redesign
 * Brand color: Teal (#09a4b9) - DO NOT CHANGE
 */

:root {
  /* ===== BRAND TEAL (Primary) ===== */
  --teal: #09a4b9;
  --teal-deep: #078a9c;
  --teal-light: #3dc0d1;
  --teal-pale: #e6f6f8;
  --teal-glow: rgba(9, 164, 185, 0.12);

  /* ===== SUPPORTING COLORS ===== */
  --navy: #1c2d42;
  --navy-mid: #28405e;
  --slate: #3d4f63;
  --amber: #e8a624;
  --amber-light: #f5c95c;
  --amber-pale: #fef8ea;
  --coral: #e8735a;
  --sage: #5ea87a;
  --lavender: #8b7ec8;

  /* ===== NEUTRAL WARMTH ===== */
  --cream: #faf9f6;
  --cream-warm: #f5f2ed;
  --white: #ffffff;
  --text: #2c2e30;
  --text-mid: #555a60;
  --text-light: #7d838b;
  --text-muted: #a3a8b0;
  --border: rgba(28, 45, 66, 0.08);
  --border-mid: rgba(28, 45, 66, 0.14);

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(28,45,66,0.04);
  --shadow-sm: 0 2px 8px rgba(28,45,66,0.06);
  --shadow-md: 0 4px 20px rgba(28,45,66,0.08);
  --shadow-lg: 0 8px 32px rgba(28,45,66,0.1);
  --shadow-xl: 0 16px 48px rgba(28,45,66,0.12);

  /* ===== BORDER RADIUS ===== */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  
  /* ===== SPACING (for future use) ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* ===== LAYOUT ===== */
  --max-width: 1180px;
  --header-height: 68px;
}