/* 4FK Theme Variables
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #169745;    /* Green */
  --color-secondary: #2D9D69;  /* Darker Green */
  --color-accent: #57D9A3;     /* Lighter Green */
  --color-warning: #FFAB00;    /* Amber */
  --color-danger: #FF5630;     /* Red */
  --color-success: #36B37E;    /* Green */
  --color-title: #ffffff;      /* Darker Green */

  /* Light Mode Colors */
  --light-bg: #F4F5F7;         /* Light Grey */
  --light-bg-alt: #FFFFFF;     /* White */
  --light-text: #172B4D;       /* Dark Grey */
  --light-text-muted: #505F79; /* Medium Grey */
  --light-border: #DFE1E6;     /* Light Grey Border */

  /* Dark Mode Colors */
  --dark-bg: #1E1E1E;          /* Dark Grey/Black */
  --dark-bg-alt: #2D2D2D;      /* Slightly Lighter Black */
  --dark-text: #F4F5F7;        /* Light Grey */
  --dark-text-muted: #A5ADBA;  /* Medium Grey */
  --dark-border: #4C4C4C;      /* Dark Grey Border */

  /* Common Theme Colors */
  --bg-color: #121212;
  --bg-alt-color: #1a1a1a;
  --text-color: #F4F5F7;
  --text-muted-color: #ccc;
  --border-color: #333;

  /* Legal Pages Specific Variables */
  --legal-primary: #29dc92;    /* Green - matches color-primary */
  --legal-primary-dark: #2D9D69;  /* Darker Green - matches color-secondary */
  --legal-primary-light: #57D9A3;  /* Lighter Green - matches color-accent */
  --legal-primary-transparent: rgba(41, 220, 146, 0.1);
  --legal-text: #F4F5F7;
  --legal-text-muted: #A5ADBA;
  --legal-bg-dark: #1E1E1E;
  --legal-bg-card: #2D2D2D;
  --legal-border: #3A3A3A;
  --legal-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  --legal-radius: 8px;
  --legal-transition: all 0.3s ease;
  --legal-font-heading: 'Sansation', sans-serif;
  --legal-font-body: 'Inter', sans-serif;

  /* Typography */
  --font-primary: 'Inter', 'Segoe UI', sans-serif;
  --font-heading: 'Sansation', 'Arial', sans-serif;
  --font-code: 'Fira Code', 'Source Code Pro', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}