/* ============================================
   Rate Goals - CSS Custom Properties (Variables)
   Design tokens for theming
   ============================================ */

:root {
  /* ===========================================
     Color Palette
     =========================================== */

  /* Background colors */
  --bg-color: #f6f3ee;
  --bg-secondary: #ffffff;

  /* Text colors */
  --text-color: #1a1f2b;
  --text-secondary: #4a5568;

  /* Border colors */
  --border-color: #e5dfd6;

  /* Primary teal - darkened for WCAG AA contrast (4.5:1 on white) */
  --primary-color: #0a7d7d;
  --primary-hover: #086363;

  /* Secondary orange - darkened for better contrast */
  --secondary-color: #c45d10;

  /* Accent & status colors */
  --accent-color: #b37a00;
  --success-color: #16a34a;
  --danger-color: #dc2626;

  /* ===========================================
     Component Colors
     =========================================== */

  /* Cards */
  --card-bg: #ffffff;
  --card-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  --hover-bg: #f0ece5;

  /* Navbar */
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-text: #1a1f2b;

  /* Form inputs */
  --input-bg: #ffffff;
  --input-text: #1a1f2b;
  --input-border: #dcd4c7;

  /* Tables */
  --table-stripe: #f4efe8;
  --table-header: #efe9e1;

  /* ===========================================
     Typography
     =========================================== */

  --font-body: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Space Grotesk', sans-serif;
}

/* ===========================================
   Global Theme Transitions
   =========================================== */

* {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
}