//accent
$figma-blue: #18a0fb; // Primary accent, used sparingly for primary actions
$figma-purple: #7b61ff; //used for components + instances
$figma-hot-pink: #ff00ff;
$figma-green: #1bc47d;
$figma-red: #f24822; // Used to communicate error
$figma-yellow: #ffeb00; // Used to communicate cautionary warning

//foreground
$figma-black: #000000; // Used for active states when text is being edited or highlighted
$figma-black-8: rgba(0, 0, 0, 0.8); // Used for elements in resting state
$figma-black-3: rgba(
  0,
  0,
  0,
  0.3
); // Lower priority UI elements like labels, disabled UI
$figma-white: #ffffff; // Primary background for UI, text on menus
$figma-white-8: rgba(255, 255, 255, 0.8); // Only used for toolbar
$figma-white-4: rgba(
  255,
  255,
  255,
  0.4
); // Use for disabled menu items on black

//background
$figma-grey: #f0f0f0; // For buttons and controls in active or selected state
$figma-silver: #e5e5e5; // For UI seperator lines
$figma-hud: #222222; // Used for heads up display, menu backgrouhnds and visual bell
$figma-toolbar: #2c2c2c;

//special
$figma-black-1: rgba(0, 0, 0, 0.1); // Primarily for Input borders on hover
$figma-blue-3: rgba(24, 145, 251, 0.3); //Used for text selection in inputs
$figma-purple-4: rgba(123, 97, 255, 0.4);
$figma-hover-fill: rgba(
  0,
  0,
  0,
  0.06
); // Light grey hover state for borderless UI controls
$figma-selection-a: #daebf7;
$figma-selection-b: #edf5fa; //edf5fa
$figma-white-2: rgba(255, 255, 255, 0.2); // Use for menu dividers

// TYPOGRAPHY //////////
// pos = positive applications, white on black bg, neg = inverse

//font-stack
$font-stack: "Inter", sans-serif;

//font-size
$font-size-small: 11px;
$font-size-medium: 12px;
$font-size-large: 13px;
$font-size-xlarge: 14px;

//font-weight
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;

//lineheight
$font-lineheight: 16px; //For 11px, 12px type
$font-lineheight-large: 24px; //13px, 14px

//letterspacing
$font-letterspacing-pos-small: 0.005em;
$font-letterspacing-neg-small: 0.01em;
$font-letterspacing-pos-medium: 0;
$font-letterspacing-neg-medium: 0.005em;
$font-letterspacing-pos-large: -0.0025em;
$font-letterspacing-neg-large: 0.0025em;
$font-letterspacing-pos-xlarge: -0.001em;
$font-letterspacing-neg-xlarge: -0.001em;

// BORDER RADIUS //////////

$border-radius-small: 2px;
$border-radius-med: 5px;
$border-radius-large: 6px;

//SHADOWS //////////

$shadow-hud: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
$shadow-floating-window: 0 2px 14px rgba(0, 0, 0, 0.15);


// additional
$header-height: 40px;
