/* =============== TOKENS =============== */

:root {

  /* Typography */
  --font-ui: system-ui, sans-serif;

  /* Neutral colors */
  --gray-100: #f3f4f6;
  --gray-300: #d1d5db;
  --gray-400: #99a1af;
  --gray-600: #4a5565;
  --gray-900: #101828;

  /* Accent colors */
  --blue-100: #dbeafe;
  --blue-300: #8ec5ff;
  --blue-500: #2b7fff;

  /* Palette colors */
  --slate-500:   #62748e;
  --rose-500:    #ff2056;
  --amber-500:   #fd9a00;
  --emerald-500: #00bc7d;
  --cyan-500:    #00b8db;
  --fuchsia-500: #e12afb;
  --indigo-500:  #615fff;

  /* ------------------------------ */

  /* Semantic colors */
  --page-bg: var(--gray-100);          /* Page background */
  --placeholder-bg: var(--gray-300);   /* Placeholder background */
  --card-bg: white;                    /* Card and button background */

  --text-primary: var(--gray-900);     /* Primary text */
  --text-muted: var(--gray-600);       /* Muted text */
  --text-disabled: var(--gray-300);    /* Disabled text */
  --icon-muted: var(--gray-600);       /* Muted icons and controls */
  --icon-quiet: var(--gray-400);       /* Quiet secondary icons */
  --icon-hover: var(--gray-900);       /* Icon hover */

  --link: var(--blue-500);              /* Link text */
  --link-hover: var(--blue-300);        /* Link hover text */

  --outline-selected: var(--blue-500);  /* Selected item outline */
  --button-active: var(--blue-100);     /* Active button background */

  /* Column header colors */
  --palette-accent-0: var(--slate-500);
  --palette-accent-1: var(--rose-500);
  --palette-accent-2: var(--amber-500);
  --palette-accent-3: var(--emerald-500);
  --palette-accent-4: var(--cyan-500);
  --palette-accent-5: var(--fuchsia-500);
  --palette-accent-6: var(--indigo-500);

  /* ------------------------------ */

  /* Default: 961px - 2399px */
  --base-size: 8px;

  --space-small: calc(var(--base-size) * 0.5); /*  4px */
  --space-medium: calc(var(--base-size) * 1);  /*  8px */
  --space-large: calc(var(--base-size) * 2);   /* 16px */

  --header-size: calc(var(--base-size) * 3);     /* 24px */
  --title-size: calc(var(--base-size) * 2);      /* 16px */
  --body-size: calc(var(--base-size) * 2);       /* 16px */
  --control-size: calc(var(--base-size) * 2.8);  /* 22.4px */
  --radius-card: calc(var(--base-size) * 1);     /*  8px */
  --outline-size: calc(var(--base-size) * 0.25); /*  2px */

  --line-height: 1.25;
}

/* Compact: <= 960px */
@media (max-width: 960px) {
  :root {
    --base-size: 6px;
  }
}

/* Wide: >= 2400px */
@media (min-width: 2400px) {
  :root {
    --base-size: 10px;
  }
}