/* PRIMITIVE TOKENS */
:root {
  /* == Colors == */

  /* Brand Green Shades */
  --green-50: #eafae9;
  --green-100: #d1f5cd;
  --green-200: #aeeeb1;
  --green-300: #7fe086;
  --green-400: #4ecf5b;
  --green-500: #14B012;
  --green-600: #119d10;
  --green-700: #0d8a0e;
  --green-800: #09670a;
  --green-900: #064c07;

  /* Gray Neutrals */
  --gray-50: #f9f9f9;
  --gray-100: #f0f0f0;
  --gray-200: #e5e5e5;
  --gray-300: #dddddd;
  --gray-400: #bbbbbb;
  --gray-500: #999999;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-800: #1e1e1e;
  --gray-900: #121212;

  /* == Typography */
  --font-family-base: 'Open Sans', sans-serif;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.75;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4rem;

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);
}


/* ==========================
   🧠 SEMANTIC TOKENS
========================== */

:root {
  --color-brand-primary: var(--green-600);
  --color-brand-hover: var(--green-700);
  --color-brand-light: var(--green-100);
  --color-brand-active: var(--green-900);

  --color-bg: var(--gray-200);
  --color-surface: var(--gray-100);
  --color-border: var(--gray-300);
  --color-text: var(--gray-800);
  --color-heading: var(--gray-900);
  --color-bg-header: var(--gray-50);

  --font-base: var(--font-family-base);
  --text-body: var(--font-size-base);
  --text-heading: var(--font-size-lg);
  --text-subtle: var(--font-size-sm);
  --text-strong: var(--font-weight-bold);
}


/* ==========================
   🌙 DARK MODE OVERRIDES
========================== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-surface: var(--gray-800);
    --color-border: var(--gray-600);
    --color-text: #e0e0e0;
    --color-heading: #ffffff;

    --color-brand-light: var(--green-900);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
  }
}
*/

/* ==========================
   🧩 COMPONENT TOKENS
========================== */

/* Button */
:root {
  --button-bg: var(--color-brand-primary);
  --button-bg-hover: var(--color-brand-hover);
  --button-text: #ffffff;
  --button-radius: 36px;
  --button-font-weight: var(--font-weight-medium);
  --button-shadow: var(--shadow-sm);
  --button-shadow-hover: var(--shadow-md);
  --button-bg-disabled: var(--gray-300)
}

/* Card */
:root {
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-text: var(--color-text);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding: var(--space-md);
}

/* Header */
:root {
  --header-bg: var(--color-brand-primary);
  --header-text: var(--color-heading);
  --header-shadow: var(--shadow-sm);
}

/* Overview */
:root {
  --overview-border: var(--color-border);
}