/* Reset & Base */

:root {
  /* Propex24 Brand Colors (from screenshots) */
  --color-primary-action: #6bc027;           /* Bright green CTA: “Start trading now” */
  --color-primary-action-hover: #58a61f;     /* Darker green on hover */
  --color-secondary-action: #2aa7b8;         /* Teal accent used for icons/accents */

  --color-background-main: #ffffff;          /* Clean white page background */
  --color-background-dark-theme: #3d4851;    /* Dark slate top navigation */
  --color-background-light: #ffffff;
  --color-background-overlay: rgba(61, 72, 81, 0.85); /* Overlay derived from nav color */
  
  --color-surface-1: #ffffff;                /* Cards, inputs */
  --color-surface-2: #f5f7f9;                /* Light gray sections */
  --color-surface-3: #e9ecef;                /* Disabled/neutral backgrounds */
  --color-surface-hover: #eef7f8;            /* Very light teal-tinted hover */
  
  --color-text-primary: #1f2932;             /* Headings / strong body text */
  --color-text-secondary: #3a4a55;           /* Standard body text */
  --color-text-tertiary: #6f7d86;            /* Muted/placeholder text */
  --color-text-disabled: #adb5bd;
  --color-text-on-primary: #ffffff;          /* Text on green/nav backgrounds */
  --color-text-link: #2aa7b8;                /* Teal links */
  
  --color-border-primary: #dee2e6;
  --color-border-secondary: #ced4da;
  --color-border-focus: #2aa7b8;             /* Teal focus ring */
  
  --color-status-success: #2e7d32;           /* Success states */
  --color-status-error: #dc3545;
  --color-status-error-background: #f8d7da;

  --color-button-disabled-background: #e9ecef;
  
  --color-accent-teal: #2aa7b8;              /* Core accent teal */
  --color-accent-green: #6bc027;             /* CTA green as secondary accent */
  --color-accent-dark: #3d4851;              /* Navigation dark slate */
  --color-accent-light-teal: #e1f4f6;        /* Very light teal */
  
  /* Typography */
  --font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-large: 25px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

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

  /* Border Radius */
  --border-radius-sm: 0.5rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 1.25rem;

  /* 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 10px 30px rgba(0, 0, 0, 0.2);

  /* Gradients */
  --gradient-milestone: linear-gradient(135deg, #e7f8fb 0%, #bfeff2 100%);
  --gradient-fade-from-top: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
  --gradient-fade-from-bottom: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
}