/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */

/* ========================================
   FONT IMPORTS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* ========================================
     COLOR PALETTE - Base Colors
     ======================================== */

  --color-brand-green-dark: #198155;
  /* Primary Brand Colors */
  --color-brand-green-primary: #00D32F;
  --color-brand-green-light: #BEEFC3;
  --color-light-border: #EBF8EF;

  /* Background Colors */
  --color-bg-primary: #010106;
  --color-bg-secondary: #04030A;
  --color-bg-secondary-dark: #1B1B1B;
  --color-bg-card: #13121C;
  --color-bg-card-dark: #0D0D0D;
  --color-bg-badge: #1F1E27;
  --color-bg-tertiary: #0D0D1B;
  --color-bg-dark: #0D0B14;
  --color-bg-dark-red: #1A1110;
  --color-bg-stats: #080612;
  --color-black: #000000;

  /* Text Colors */
  --color-text-white: #FFFFFF;
  --color-text-light-white: #C6D3E7;
  --color-text-muted: #7D8A9C;
  --color-disabled:#9d9d9d;

  /* Chart Colors */
  --color-chart-cyan: #00FFE6;
  --color-chart-red: #FF4E4E;

  /* ========================================
     COLOR PALETTE - Alpha/Opacity Variants
     ======================================== */

  --color-brand-green-alpha-8: #39ff1414;
  --color-brand-green-alpha-25: rgba(57, 255, 20, 0.25);
  --color-brand-green-alpha-35: rgba(57, 255, 20, 0.35);
  --color-brand-green-alpha-40: rgba(57, 255, 20, 0.4);
  --color-brand-green-alpha-42: rgba(57, 255, 20, 0.42);
  --color-brand-green-alpha10per: rgba(57, 255, 20, 0.1);
  --color-brand-green-alpha-10: rgba(0, 211, 47, 0.1);

  --color-black-alpha-42: rgba(0, 0, 0, 0.42);
  --color-light-black-alpha-08: rgba(21, 21, 21, 0.08);
  --color-light-black-alpha-90: rgba(21, 21, 21, 0.9);

  --color-black-alpha-30: rgba(0, 0, 0, 0.3);

  --color-muted-alpha-20: rgba(125, 138, 156, 0.2);

  /* ========================================
     GRADIENTS
     ======================================== */

  --gradient-brand-primary: linear-gradient(270deg, var(--color-brand-green-dark) 0%, var(--color-brand-green-primary) 100%);
  --gradient-brand-secondary: linear-gradient(242.52deg, var(--color-brand-green-primary) -18.89%, var(--color-bg-tertiary) 81.68%);
  --gradient-green: linear-gradient(270deg, #22990C 0%, #39FF14 100%);
  --gradient-dark-red: linear-gradient(180deg, #1A1110 0%, #1F1E27 100%);
  --gradient-stats-te0xt: linear-gradient(135deg, #39FF14 0%, #00A82D 100%);

  /* ========================================
     SEMANTIC TOKENS - Applied Usage
     ======================================== */

  /* Hero Section */
  --bg-hero-start: var(--color-bg-secondary);
  --bg-hero-end: var(--color-bg-secondary);
  --brand-green-500: var(--color-brand-green-primary);
  --brand-green-400: var(--gradient-brand-secondary);
  --brand-green-outer-glow: var(--gradient-brand-primary);

  /* Text */
  --text-white: var(--color-text-white);
  --text-muted: var(--color-text-muted);

  /* Cards */
  --card-bg: var(--color-bg-secondary);

  /* Borders & Outlines */
  --outline-gray: var(--color-text-muted);
  --pill-outline-green: var(--color-brand-green-primary);

  /* Charts */
  --chart-cyan: var(--color-chart-cyan);
  --chart-red: var(--color-chart-red);

  /* ========================================
     FONT RELATED STYLES AND EFFECTS
     ======================================== */

  /* Font Families */
  --font-family-heading: 'Anton', sans-serif;
  --font-family-body: 'Poppins', sans-serif;
  --font-family-card-title: 'Fira Sans', sans-serif;

  /* Font Sizes  */
  --fs-180: clamp(4rem, 6.67vw + 1.867rem, 11.25rem);
  --fs-120: clamp(4rem, 6.67vw + 1.867rem, 11.25rem);
  --fs-100: clamp(3rem, 5.556vw + 1.444rem, 10rem);
  --fs-80: clamp(2rem, 3.333vw + 1.467rem, 2rem);
  --fs-60: clamp(2.2rem, 1.778vw + 1.622rem, 3.75rem);
  --fs-48: clamp(1.9rem, 1.333vw + 1.467rem, 3rem);
  --fs-44: clamp(1.8rem, 1.111vw + 1.444rem, 2.75rem);
  --fs-40: clamp(2rem, 0.833vw + 1.733rem, 2.5rem);
  --fs-36: clamp(1.5rem, 0.833vw + 1.233rem, 2.25rem);
  --fs-30: clamp(1.3rem, 0.556vw + 1.122rem, 1.875rem);
  --fs-24: clamp(1.2rem, 0.278vw + 1.111rem, 1.5rem);
  --fs-22: clamp(1rem, 0.231vw + 0.926rem, 1.375rem);
  --fs-20: clamp(0.9rem, 0.185vw + 0.841rem, 1.25rem);
  --fs-18: clamp(0.875rem, 0.139vw + 0.833rem, 1.125rem);
  --fs-16: clamp(0.85rem, 0.093vw + 0.821rem, 1rem);
  --fs-14: clamp(0.8rem, 0.046vw + 0.786rem, 0.875rem);
  --fs-12: clamp(0.75rem, 0.031vw + 0.75rem, 0.75rem);
  
  /* Font Weights */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* Letter Spacing */
  --ls-0-5: 0.5px;
  --ls-1: 1px;
  --ls-2: 2px;

  /* Line Heights */
  --lh-1: 1;
  --lh-1-2: 1.2;
  --lh-1-3: 1.3;
  --lh-1-4: 1.4;

  /* Spacing  */
  --spacing-4: 0.25rem;
  --spacing-5: 0.313rem;
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-10: 0.625rem;
  --spacing-12: 0.75rem;
  --spacing-14: 0.875rem;
  --spacing-15: 0.9375rem;
  --spacing-16: 1rem;
  --spacing-18: 1.125rem;
  --spacing-20: 1.25rem;
  --spacing-22: 1.375rem;
  --spacing-24: 1.5rem;
  --spacing-30: 1.875rem;
  --spacing-32: 2rem;
  --spacing-36: 2.25rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-60: 3.75rem;
  --spacing-80: 5rem;
  --spacing-100: 6.25rem;
  --spacing-120: 7.5rem;
  --spacing-140: 8.75rem;
  --spacing-184: 11.5rem;
  --spacing-260: 16.25rem;
  --spacing-315:19.688rem;
  --spacing-320:20rem;
  --spacing-360: 22.5rem;
  --spacing-430: 26.875rem;
  --spacing-108:6.75rem;


  /* ========================================
     BORDER EFFECTS
     ======================================== */

  /* Border Radius */
  --br-4: 0.25rem;
  --br-8: 0.5rem;
  --br-12: 0.75rem;
  --br-16: 1rem;
  --br-20: 1.25rem;
  --br-24: 1.5rem;
  --br-30: 1.875rem;
  --br-36: 2.25rem;
  --br-40: 2.5rem;
  --br-48: 3rem;
  --br-100: 6.25rem;
  --br-200: 10rem;



  --title-color: #151515;
  --light-grey: #F2F5F6;
  --dark-grey: #5D5D5D;
  --danger-color: #F99F1B;
  --border-color: #B0BBCC;
  --darktext-color: #101010;
  --lighttext-color: #4A4A4A;
  --table-hover: #e9f2ff;
  --table-color: #111111;
  --table-border: #E8E8E8;
  --lightblogfont:#424242;
  --stockgreen:#31A400;
  --stockred:#FF002B;
}