@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

:root {
  /* Foreground Colors (Text/Icons) - Light Mode */
  --foreground-default: 0deg 0% 10%;
  --foreground-lighter: 0deg 0% 40%;
  --foreground-light: 0deg 0% 30%;
  --foreground-muted: 0deg 0% 60%;
  --foreground-semi-light: 0deg 0% 20%;

  /* Background Colors - Light Mode */
  /* Reusing variable names but mapping to Light values */
  --background-default: 0deg 0% 100%;
  --background-dash-sidebar: 0deg 0% 100%;
  --background-dash-canvas: 0deg 0% 98%;
  /* Slightly grey for contrast */
  --background-200: 0deg 0% 96%;
  --background-control: 0deg 0% 94%;
  --background-alternative-default: 0deg 0% 98%;
  --background-selection: 0deg 0% 92%;
  --background-muted: 0deg 0% 95%;
  --background-overlay-default: 0deg 0% 0% / 0.5;

  /* Surface Colors (Cards/Panels) - Light Mode (White cards on Grey BG) */
  --background-surface-400: 0deg 0% 90%;
  --background-surface-300: 0deg 0% 95%;
  --background-surface-200: 0deg 0% 98%;
  --background-surface-100: 0deg 0% 100%;
  --background-surface-75: 0deg 0% 100%;

  /* Brand Colors (Green) - Kept similar */
  --brand-link: 155deg 100% 38.6%;
  --brand-button: 154.9deg 100% 19.2%;
  /* Dark green for text on light? */
  --brand-default: 153.1deg 60.2% 52.7%;
  --brand-50: 154.9deg 100% 97%;
  --brand-100: 154.9deg 100% 94%;
  --brand-200: 162deg 100% 10%;
  --brand-300: 155.1deg 100% 20%;
  --brand-400: 155.5deg 100% 30%;
  --brand-500: 154.9deg 100% 40%;
  /* Slightly darker for better visibility on white */
  --brand-600: 154.9deg 59.5% 50%;
  --brand-700: 154.9deg 100% 19.2%;
  --brand-800: 154.9deg 100% 15%;
  --brand-900: 154.9deg 100% 10%;

  /* Warning Colors */
  --warning-default: 38.9deg 100% 42.9%;
  --warning-50: 38.9deg 100% 97%;
  --warning-100: 38.9deg 100% 94%;
  --warning-200: 38.9deg 100% 90%;
  --warning-300: 32.3deg 100% 80%;
  --warning-400: 33.2deg 100% 70%;
  --warning-500: 34.8deg 90.9% 50%;
  --warning-600: 38.9deg 100% 42.9%;

  /* Destructive Colors */
  --destructive-default: 10.2deg 77.9% 53.9%;
  --destructive-100: 7.5deg 100% 96%;
  --destructive-200: 10.9deg 23.4% 92%;
  --destructive-500: 7.9deg 71.6% 45%;
  --destructive-600: 9.7deg 85.2% 62.9%;

  /* Secondary Colors */
  --secondary-default: 220deg 100% 50%;
  --secondary-100: 220deg 100% 96%;
  --secondary-200: 220deg 23% 90%;
  --secondary-500: 220deg 70% 50%;

  /* Borders */
  --border-stronger: 0deg 0% 80%;
  --border-strong: 0deg 0% 85%;
  --border-alternative: 0deg 0% 88%;
  --border-control: 0deg 0% 90%;
  --border-overlay: 0deg 0% 80%;
  --border-secondary: 0deg 0% 92%;
  --border-muted: 0deg 0% 92%;
  --border-default: 0deg 0% 90%;

  /* Natural Colors (Grays/Neutrals) - Inverted for Light Mode */
  --natural-default: 0deg 0% 0%;
  /* Black */
  --natural-50: 0deg 0% 100%;
  /* White */
  --natural-100: 0deg 0% 96%;
  /* Light Grey */
  --natural-200: 0deg 0% 92%;
  --natural-300: 0deg 0% 88%;
  --natural-400: 0deg 0% 80%;
  --natural-500: 0deg 0% 60%;
  --natural-600: 0deg 0% 40%;
  --natural-700: 0deg 0% 30%;
  --natural-800: 0deg 0% 20%;
  --natural-900: 0deg 0% 10%;
  --natural-950: 0deg 0% 5%;
  /* Almost Black */

  /* Concrete color definitions */
  --color-bg-dark: hsl(0, 0%, 98%);
  /* Main Background is now Light Grey/White */
  --color-brand: hsl(153.1, 60.2%, 52.7%);
}

body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--color-bg-dark);
  color: hsl(var(--natural-950));
  /* Dark text */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border-control));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--border-strong));
}