/* ==========================================================================
   CAPO Dashboard UI - Design Tokens
   Extracted from Figma "Dashboard Design" project
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     COLOR TOKENS
     ----------------------------------------------------------------------- */

  /* Primary (Green) */
  --color-primary-900: #16A34A;
  --color-primary-800: #22C55E;
  --color-primary-200: #86EFAC;
  --color-primary-dark-shade: #052E16;

  /* Neutrals / Greys (Blue Grey scale) */
  --color-grey-100: #FFFFFF;
  --color-grey-300: #F9FAFB;
  --color-grey-700: #737791;
  --color-grey-800: #444A6D;
  --color-grey-900: #151D48;

  /* Core */
  --color-white: #FFFFFF;
  --color-black: #374557;
  --color-dark: #333333;
  --color-gray-1: #A098AE;

  /* Supporting Colors */
  --color-yellow: #FFA412;
  --color-yellow-shade: #FEF6E6;
  --color-green: #3CD856;
  --color-green-shade: #E2FFF3;
  --color-violet: #A700FF;
  --color-violet-shade: #FBF1FF;

  /* State Colors */
  --color-error: #EB5757;
  --color-success: #27AE60;

  /* Chart Colors */
  --color-chart-blue: #0095FF;
  --color-chart-green: #00E096;
  --color-chart-purple: #884DFF;
  --color-chart-orange: #FF8F0D;
  --color-chart-yellow: #FFCF00;
  --color-chart-teal: #4AB58E;
  --color-chart-red: #EF4444;
  --color-chart-violet: #A700FF;

  /* Card Backgrounds (Sales Cards) */
  --color-card-pink: #FFE2E5;
  --color-card-orange: #FFF4DE;
  --color-card-green: #DCFCE7;
  --color-card-purple: #F3E8FF;

  /* Semantic / Surface */
  --color-surface: #FFFFFF;
  --color-surface-secondary: #F9FAFB;
  --color-border: #F8F9FA;
  --color-border-strong: #C3D3E2;
  --color-divider: #EDF2F6;
  --color-axis: rgba(70, 78, 95, 0.04);
  --color-text-muted: #96A5B8;
  --color-text-secondary: #425166;

  /* Notification */
  --color-notification-bg: #FFFAF1;

  /* Red accent */
  --color-red-02: #E36867;

  /* Progress bar track colors */
  --color-progress-blue-track: #CDE7FF;
  --color-progress-green-track: #8CFAC7;
  --color-progress-purple-track: #C5A8FF;
  --color-progress-orange-track: #FFD5A4;

  /* Badge backgrounds */
  --color-badge-blue-bg: #F0F9FF;
  --color-badge-green-bg: #F0FDF4;
  --color-badge-purple-bg: #FBF1FF;
  --color-badge-orange-bg: #FEF6E6;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY TOKENS
     ----------------------------------------------------------------------- */

  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;
  --font-accent: 'Inter', sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Font Sizes */
  --fs-4xl: 36px;
  --fs-3xl: 30px;
  --fs-2xl: 24px;
  --fs-xl: 20px;
  --fs-lg: 18px;
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-2xs: 10px;

  /* Line Heights */
  --lh-4xl: 1.4;
  --lh-3xl: 1.5;
  --lh-2xl: 32px;
  --lh-xl: 32px;
  --lh-base: 24px;
  --lh-sm: 20px;
  --lh-xs: 16px;
  --lh-text-regular: 100%;
  --lh-loose: 30px;

  /* -----------------------------------------------------------------------
     SPACING TOKENS
     ----------------------------------------------------------------------- */

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 30px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;

  /* -----------------------------------------------------------------------
     BORDER RADIUS TOKENS
     ----------------------------------------------------------------------- */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-base: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 26px;

  /* -----------------------------------------------------------------------
     SHADOW TOKENS
     ----------------------------------------------------------------------- */

  --shadow-card: 0px 4px 20px 0px rgba(238, 238, 238, 0.5);
  --shadow-elevated: 0px 20px 50px 0px rgba(55, 69, 87, 0.1);

  /* -----------------------------------------------------------------------
     LAYOUT TOKENS
     ----------------------------------------------------------------------- */

  --sidebar-width: 345px;
  --topbar-height: 120px;
  --content-gap: 32px;
  --card-padding: 24px;
  --dashboard-width: 1920px;
  --dashboard-height: 1311px;

  /* Icon Sizes */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;
  --icon-avatar: 48px;
  --icon-profile: 60px;
}