:root {
  --br: 4px;
  --xs-pad: 4px;
  --sm-pad: 8px;
  --md-pad: 16px;
  --lg-pad: 20px;
  --xlg-pad: 40px;

  --sm-breakpoint: 400px;
  --lg-breakpoint: 768px;

  --primary-400: #60a5fa;
  --primary: #3b82f6;
  --primary-600: #2563eb;
  --accent: #64ffda;
  --red: #f43f5e;
  --red-600: #dc2626;
  --yellow: #eab308;
  --grey: #f7f7f9;
  --white: #fff;
  --black: #000;

  --text: rgba(0, 0, 0, 0.8);
  --secondary: rgba(0, 0, 0, 0.54);
  --disabled: rgba(0, 0, 0, 0.38);
  --dividers: rgba(0, 0, 0, 0.12);

  --link-color: var(--primary);
  --link-hover-color: var(--primary-600);

  --sans-serif:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --serif: Georgia, Times, "Times New Roman", serif;
  --monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-family: var(--sans-serif);

  --font-size-base: 16px;
  --font-size-xs: 8px;
  --font-size-sm: 14px;
  --font-size-h1: 40px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 16px;
  --line-height-base: 1.5;

  --border: 1px solid var(--dividers);
}