/*
  Variables
  Defines all CSS custom properties for the project (colors, typography, spacing, breakpoints).
*/

:root {
  /* Colors */
  --color-primary: rgb(0, 92, 222);       /* Blue */
  --color-primary-hover: rgb(0, 76, 184); /* Dark Blue */
  --color-secondary: #f5f5f7;             /* Light Gray background */
  --color-success: #27ae60;               /* Green */
  --color-danger: #e74c3c;                /* Red */
  --color-danger-hover: #e60000;
  --color-text-main: #1d1d1f;             /* Dark Gray/Black */
  --color-text-muted: #6e6e73;            /* Gray */
  --color-background: #ffffff;            /* White */
  --color-border: #dddddd;                /* Light Gray */
  --color-border-dark: #1d1d1f;

  /* Typography (rem-based) - Assuming 16px base */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-family-heading: "Arial", sans-serif;

  --font-xs: 0.75rem;    /* 12px */
  --font-sm: 0.875rem;   /* 14px */
  --font-md: 1rem;       /* 16px */
  --font-lg: 1.125rem;   /* 18px */
  --font-xl: 1.25rem;    /* 20px */
  --font-2xl: 1.5rem;    /* 24px */
  --font-3xl: 2rem;      /* 32px */
  --font-4xl: 2.375rem;  /* 38px */
  --font-5xl: 2.625rem;  /* 42px */

  /* Spacing Scale (rem-based) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-15: 3.75rem; /* 60px */

  /* Breakpoints */
  --bp-xs: 450px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}