@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&family=Noto+Sans+Mono&family=Montez&display=swap");

:root {
  --color-primary: hsl(292, 32%, 40%);
  --color-primary-active: #3d365c;
  --color-secondary: hsl(59, 76%, 87%);
  --color-secondary-active: hsl(59, 76%, 77%);
  --color-warning-light: hsl(39, 80%, 77%);

  /** Colors */
  --color-brand: hsl(180 100% 30%);
  --color-brand-active: hsl(180 100% 20%);

  --color-text: hsl(240 16% 12%);
  --color-text-light: hsl(240 3.8% 50%);
  --color-white: hsl(0 0% 100%);
  --color-emphasize: hsl(240 3.8% 60%);

  --color-utility: hsl(225, 16%, 95%);
  --color-utility-active: hsl(225, 16%, 85%);

  --color-success: var(--color-brand);
  --color-success-active: var(--color-brand-active);
  --color-danger: hsl(346, 83%, 34%);
  --color-danger-active: hsl(346, 83%, 24%);
  --color-warning: hsl(36 100% 40%);
  --color-warning-active: hsl(36 100% 39%);
  --color-highlight: hsl(47 100% 47%);
  --color-highlight-active: hsl(47 100% 37%);

  --color-transparent-background: hsla(0, 0%, 20%, 0.8);
  --backdrop-filter: blur(4px);
  --box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px, rgba(0, 0, 0, 0.1) 0px 2px 16px;

  --color-code: hsl(200, 80%, 40%);
  --color-code-background: hsl(0, 0%, 97%);

  /** Typography */
  --font-family: "Nunito Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "Noto Sans Mono", monospace;
  --font-family-logo: "Montez";

  --font-size-tiny: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size: 1rem;
  --font-size-large: 1.15rem;
  --font-size-huge: 1.75rem;
  --font-size-giant: 2.5rem;

  --font-weight: 300;
  --font-weight-bold: 600;

  /** Border */
  --border-color: hsl(240 5.9% 90%);
  --border-style: solid;
  --border-width: 1px;
  --border-width-large: 3px;

  --border-radius-small: 0.1875rem;
  --border-radius: 0.25rem;
  --border-radius-large: 0.75rem;
  --border-radius-round: 9999px;

  /** Spacing */
  --spacing-tiny: calc(var(--spacing) / 4);
  --spacing-small: calc(var(--spacing) / 2);
  --spacing: 1rem;
  --spacing-large: calc(var(--spacing) * 2);
  --spacing-huge: calc(var(--spacing) * 4);

  /** Forms */
  --form-width: 400px;
  --form-border-color: var(--border-color);
  --form-placeholder-color: hsl(240 3.8% 65%);

  /** Content */
  --content-max-width: 1280px;

  /** Banner */
  --banner-height: 60px;

  /** Turbo */
  --turbo-progress-height: 4px;

  /** Sidebar */
  --sidebar-button-size: 36px;

  /** Sidebar Navigation */
  --sidebar-navigation-width: 240px;

  /** Workbench */
  --workbench-width: 400px;
  --workbench-animation-duration: 500ms;

  /** Orb */
  --orb-blob-1: hsla(292, 32%, 40%, 0.7);
  --orb-blob-2: hsla(292, 32%, 60%, 0.7);
  --orb-blob-3: hsla(292, 32%, 80%, 0.7);
  --orb-blob-4: hsla(292, 32%, 40%, 0.7);
  --orb-size: 72px;
  --orb-speed: 0.5;
  --orb-speed-active: 0.2;

  /** History */
  --history-dot-size: 24px;

  /** Tasks */
  --task-connection-width: 6px;

  /** Spinner */
  --spinner-track-width: 2px;
  --spinner-track-color: var(--color-primary);
  --spinner-indicator-color: hsl(292, 32%, 95%);
  --spinner-animation-duration: 2s;
}